预览加载中，请您耐心等待几秒...

如何在Html中引入外部页面.docx

预览
1/4
2/4
3/4
4/4

在线预览结束，喜欢就下载吧，查找使用更方便

下载提示 文本预览

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

通常一个网站的head,foot,rightBar(右侧的条目)都是相同的，这部分内容可以通过引入的方式，否则一旦需要修改，就需要修改十个，二十个，乃至更多的页面，是一项既繁琐但又毫无意义的工作。借助于PHP或者JSP，使用include能够轻松解决此问题，但是如果脱离后端语言，从前端的角度，能不能解决这个问题呢？ 1、借助于iframe 首先，最容易想到的应该是使用iframe,虽然html5废除了frame,但是依旧保留了iframe,我们仍可以继续使用，iframe有一个frameboder属性，设置属性值为0或者为no,去除iframe的边框。然后将scrolling设为no。这是完全可行的，不过记得要在服务器环境下运行。 HYPERLINK"http://www.l-ch.net/"申博资讯 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> 点击”详情”，跳转到的位置. b.使用标签的id属性 <ahref="#detail">详情</a><divid="detail"></div> 点击"详情"，跳转到<divid="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><div><imgsrc="img/photo1.jpg"width="500px"/></div><iframesrc="test1.html"height="100px"name="leftFrame"scrolling="No"noresize="noresize"id="leftFrame"></iframe><div><imgsrc="img/photo2.jpg"width="500px"/></div><div><imgsrc="img/photo3.jpg"width="500px"/></div><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;};to