Html中引入外部页面的方法是什么

发布时间：2022-01-19 16:54:28 来源：亿速云阅读：166 作者：kk 栏目：web开发

这篇文章主要为大家分析了Html中引入外部页面的方法是什么的相关知识点，内容详细易懂，操作细节合理，具有一定参考价值。如果感兴趣的话，不妨跟着跟随小编一起来看看，下面跟着小编一起深入学习“Html中引入外部页面的方法是什么”的知识吧。

　　1、借助于iframe

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

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

　　frame.contentWindow.document.XXX方法,

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

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

　　在此，再补充一点关于锚点的知识：

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

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

　　具体如下：

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

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

　　<aname="detail"></a>

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

　　b.使用标签的id属性

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

　　<pid="detail"></p>

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

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

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

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

<!doctypehtml><htmllang="en">
　　<head>
　　<!--网站编码格式，UTF-8国际编码，GBK或gb2312中文编码-->
　　<metahttp-equiv="content-type"content="text/html;charset=utf-8"/>
　　<metaname="Keywords"content="关键词一，关键词二">
　　<metaname="Description"content="网站描述内容">
　　<metaname="Author"content="YvetteLau">
　　<title>Document</title>
　　<!--cssjs文件的引入-->
　　<style>
　　#leftFrame{display:block;}
　　</style>
　　</head>
　　<body>
　　<p><imgsrc="img/photo1.jpg"width="500px"/></p>
　　<iframesrc="test1.html"height="100px"name="leftFrame"scrolling="No"noresize="noresize"id="leftFrame"></iframe>
　　<p><imgsrc="img/photo2.jpg"width="500px"/></p>
　　<p><imgsrc="img/photo3.jpg"width="500px"/></p>
　　<pid="buttom">detail</p>
　　</body></html><script>
　　window.onload=function(){
　　variframe=document.querySelector("#leftFrame");varbot=iframe.contentWindow.document.querySelector("#bot");vartop=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的高度,跳转到顶部),另一种方法就是<ahref="#">回到顶部</a>

　　2、借助于ajax(jquery的load方法)

　　另外还有一种方法，是借助于jQuery的load方法载入页面。

　　load(url,data,callback);url是待装入HTML网页网址;data:发送至服务器的key/value;callback:载入成功时回调函数。

$(function(){
　　$("selector1").load("page1.html");
　　$("selector2").load("page2.html");
　　$("selector3").load("page3.html");
　　});

　　通过js追加进来的DOM结构，对SEO（搜索引擎优化）有影响，类似百度蜘蛛是无法抓取的！一般情况下不到万不得已的时候，不推荐使用。page1.html/page2.html/page3.html写需要的Html片段即可，因为是load进来的，也就是异步加载，在需要获取page1.html等页面的元素时，可以结合setTimeout使用，确保页面被加载进来。

　　3、使用HTMLimports

　　HTMLimports提供了一种在一个HTML文档中包含和重用另一个HTML文档的方法。目前谷歌已经全面支持HTMLimports，Opera35版本之后支持，但是FF依旧不支持。(在谷歌的地址栏输入:chrome://flags,启动或禁止一些功能)

　　尽管目前HTMLimports的兼容不是很好，但是我们还是有必要了解其使用方法，W3C已经发布了HTMLimports的标准草案，相信后期应该还是会用得比较普遍的。使用HTMLimports

<!doctypehtml><htmllang="en">
　　<head>
　　<!--网站编码格式，UTF-8国际编码，GBK或gb2312中文编码-->
　　<metahttp-equiv="content-type"content="text/html;charset=utf-8"/>
　　<metaname="Keywords"content="关键词一，关键词二">
　　<metaname="Description"content="网站描述内容">
　　<metaname="Author"content="YvetteLau">
　　<title>Document</title>
　　<linkrel="import"href="test1.html"/>
　　</head>
　　<body>
　　<pid="content"></p>
　　</body></html><script>
　　varpost=document.querySelector("link[rel='import']").import;varcon=post.querySelector("p");
　　document.querySelector("#content").appendChild(con.cloneNode(true));varclone=document.importNode(con,true)
　　document.querySelector("#content").appendChild(clone)</script>

　　给出了两种将import进来的html中我们需要的部分插入到当前html.

　　最后简单介绍document.querySelector和document.querySelectorAll，这两个方法是HTML5在WebAPI中新引入的方法，大大简化了在原生Javascript代码中选取元素。

　　document.querySelector和document.querySelectorAll都是接收一个字符串作为参数，这个参数需要符合CSS选择语法，即:标签、类选择器、ID选择器，属性选择器(E[type=”XX”]),结构选择器(:nth-child(n))等。不支持伪类选择器。

　　document.importNode(node,deep)方法把一个节点从另一个文档复制到该文档以便应用，第二个值为true，那么将该节点的所有子孙节点也复制过来。

　　node.cloneNode(deep):对已有的节点进行克隆,deep值为true，表示克隆其子孙节点。如果deep为false，则只克隆该节点自身。

　　除了以上方法外，目前更为主流的一种方式是使用组件化开发。每一部分作为一个组件。

html有什么特点

1、简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便，适合初学前端开发者使用。 2、可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。 3、平台无关性：超级文本标记语言能够在广泛的平台上使用，这也是万维网盛行的一个原因。 4、通用性：HTML是网络的通用语言，它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

关于“Html中引入外部页面的方法是什么”就介绍到这了,更多相关内容可以搜索亿速云以前的文章，希望能够帮助大家答疑解惑，请多多支持亿速云网站！

向AI问一下细节

Html中引入外部页面的方法是什么

html有什么特点

猜你喜欢

最新资讯

相关推荐

相关标签