189 8069 5689
这篇文章主要介绍了使用iframe标签法在HTML中引入外部页面，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
创新互联公司一直通过网站建设和网站营销帮助企业获得更多客户资源。 以"深度挖掘，量身打造，注重实效"的一站式服务，以成都做网站、成都网站建设、移动互联产品、全网整合营销推广服务为核心业务。十多年网站制作的经验，使用新网站建设技术，全新开发出的标准网站，不但价格便宜而且实用、灵活，特别适合中小公司网站制作。网站管理系统简单易用，维护方便，您可以完全操作网站资料，是中小公司快速网站建设的选择。
首先，最容易想到的应该是使用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属性的方式
详情 12
点击”详情”，跳转到的位置.
b.使用标签的id属性
详情 12
点击”详情”，跳转到
使用a+name的方式经常会出现锚点失效的情况，因此推荐使用id来绑定锚点。
言归正传，引入iframe之后，我们能否通过点击iframe中的元素来定位的相应的位置呢，这里，我们使用iframe引入head.html，这也是我最初的目的。
因此我们要实现的是:点击iframe的a标签，定位到主Html相应的位置,通过实现发现，单纯通过html是无法实现的，但是借助于JS则可以做到。
Document
detail
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的高度,跳转到顶部),另一种方法就是回到顶部。
感谢你能够认真阅读完这篇文章，希望小编分享使用iframe标签法在HTML中引入外部页面内容对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，遇到问题就找创新互联，详细的解决方法等着你来学习!