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

这篇文章主要为大家分析了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属性的方式

详情

点击”详情”,跳转到的位置.

b.使用标签的id属性

详情

点击”详情”,跳转到的位置.

使用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的高度,跳转到顶部),另一种方法就是回到顶部

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


  
  
  
  
  
  
  Document
  
  
  
  

  

给出了两种将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中引入外部页面的方法是什么”就介绍到这了,更多相关内容可以搜索创新互联以前的文章,希望能够帮助大家答疑解惑,请多多支持创新互联网站!


本文题目:Html中引入外部页面的方法是什么
标题链接:http://azwzsj.com/article/gesdis.html