如何在HTML中引入外部页面(iframe标签法)


本文摘自PHP中文网,作者yulia,侵删。

在页面布局时,会将部分外部页面引入到HTML中,这篇文章就和大家讲讲如何在HTML中引入外部页面之iframe标签法。有需要的朋友可以参考一下,希望对你有用。

首先,最容易想到的应该是使用iframe,虽然html5废除了frame,但是依旧保留了iframe,我们仍可以继续使用,iframe有一个frameboder属性,设置属性值为0或者为no,去除iframe的边框。然后将scrolling设为no。这是完全可行的,不过记得要在服务器环境下运行。

1

2

3

var frame = document.getElementsByTageName("iframe")[0];

   frame.contentWindow.document.XXX方法,

   如frame.contentWindow.document.querySelector("#btn");//获取iframe中Id为btn的节点.123

因为此前没有使用iframe来引入头部的经验,考虑到头部通常除了跳转之外,另一个作用应该是定位,在页面较长时,通过点击,准确定位到某处。页面的跳转,使用iframe引入并无影响,那么锚点呢?这个需要试一试才知道。

在此,再补充一点关于锚点的知识:

锚点可以跳转到当前页面的相应位置,还可以跳转到其它页面的相应位置。

实现锚点有两种方式,一种是a标签+name属性,还有一种是使用标签的Id属性。

具体如下:

a.使用a标签+name属性的方式

1

2

<a href = "#detail">详情</a>

<a name = "detail"></a>12

点击”详情”,跳转到<a name = "detail">的位置.

b.使用标签的id属性

1

2

<a href = "#detail">详情</a>

<div id = "detail"></div>12

点击”详情”,跳转到<div id = "detail">的位置.

使用a+name的方式经常会出现锚点失效的情况,因此推荐使用id来绑定锚点。

言归正传,引入iframe之后,我们能否通过点击iframe中的元素来定位的相应的位置呢,这里,我们使用iframe引入head.html,这也是我最初的目的。

因此我们要实现的是:点击iframe的a标签,定位到主Html相应的位置,通过实现发现,单纯通过html是无法实现的,但是借助于JS则可以做到。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

<!doctype html>

<html>

    <head>

    <!--网站编码格式,UTF-8 国际编码,GBK或 gb2312 中文编码-->

        <meta http-equiv="content-type" content="text/html;charset=utf-8" />

        <meta name="Keywords" content="关键词一,关键词二">

        <meta name="Description" content="网站描述内容">

        <meta name="Author" content="Yvette Lau">

        <title>Document</title>

        <!--css js 文件的引入-->

        <style>

            #leftFrame{display:block;}

        </style>

    </head>

    <body>         

        <div><img src = "img/photo1.jpg" width="500px"/></div>     

        <iframe src="test1.html" height= "100px" name="leftFrame" scrolling="No"  noresize="noresize"  id="leftFrame"></iframe>

        <div><img src = "img/photo2.jpg"  width="500px"/></div>

        <div><img src = "img/photo3.jpg" width="500px" /></div>

        <p id = "buttom">detail</p>

    </body>

</html>

<script>

    window.onload = function(){

        var iframe = document.querySelector("#leftFrame");

        var bot = iframe.contentWindow.document.querySelector("#bot");

        var top = iframe.contentWindow.document.querySelector("#top");

        bot.onclick = function(){

            document.body.scrollTop = document.body.offsetHeight;

        };

        top.onclick = function(){

            document.body.scrollTop = 0;

        };

    };

</script>

iframe中有id为bot和top的元素。通过JS的方式实现定位。

在主页面中,通过iframe.contentWindow能够以HTML对象来返回iframe中的文档,可以通过所以标准的DOM方法来处理被返回的对象。

在iframe页面中,通过parent定位到父html,可以通过top定位到顶层的html.

同级iframe之间调用,需要先定位到父html,再定位到iframe.

补充点关于锚点的知识,其关键作用的就是连接地址后面加的#detail(detail仅是泛指).如果当前的url为localhost:8080/index.html.那么锚点之后,url应为localhost:8080/index.html#detail

URL地址末尾带有”#”标识符,表示需要跳转到对应的位置。#idName,浏览器会在页面中找到符合”#idName”特点的标签。如果URL中”#”后面跟随的字符在文中找不到,如果是当前页面,那么不跳转,如果是从其它页面跳转过来,则显示页面顶部。

回到页面顶部,除了可以通过JS设置body的scrollTop(0返回到顶部,设置为body的高度,跳转到顶部),另一种方法就是<a href = "#">回到顶部</a>。

以上就是如何在HTML中引入外部页面(iframe标签法)的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

Html与css中的过渡模块

Html怎么设置锚点

Html下拉菜单怎么做?Html下拉菜单的代码实例介绍

Html如何移除元素

Html问号后的值怎么获取

关于Html操作滚动条的方法

Html applet标签怎么用

Html的<basefont> 标签

Html标签中如何添加大于号

怎么用div布局?

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...