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

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

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

 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属性的方式

<a href = #detail>详情</a> 
<a name = detail></a>12

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

b.使用标签的id属性

<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则可以做到。

<!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>。

原文地址：https://www.jb51.cc/html/1207946.html

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

相关推荐