使用iframe遇到的问题

最新推荐文章于 2024-05-11 20:20:18 发布

jsy625

最新推荐文章于 2024-05-11 20:20:18 发布

阅读量832

点赞数

分类专栏：前端知识文章标签： iframe html

本文链接：https://blog.csdn.net/jsy625/article/details/41900491

版权

前端知识专栏收录该内容

3 篇文章 0 订阅

订阅专栏

网站的头部和尾部总是一样的，所以为了修改方便，也为了看代码时更方便，决定将头部和尾部相同的部分分别放在header.html和foot.html中，然后各个页面直接include这两个页面。

网页上关于这种加载的方法大概有两种（对于html来说）：一个是用js，一个是用iframe。js没学过，一点不会，试了几个不知道哪里问题不行，所以最后选择了iframe。按照资料上说直接在需要的地方加

<iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src="header.html" height="500px;" width="100%"></iframe>
header.html中加入：
<script>
   // You can also use "$(window).load(function() {"
   $(function () {
     // Slideshow 1
     $("#slider1").responsiveSlides({
       maxwidth: 1600,
       speed: 600
     });
});
 </script>
 <script src='header.html'></script>

一试果然可以能成功加载进来，非常兴奋。然后随便点了一个导航栏子栏目中的一个栏目，结果问题来了，页面还是停留在原来的页面无法跳转，而直接输入url却能正常显示。查了资料发现时用了框架的问题。只要在链接中加上target="_parent"就可以了，一试果然可以，完美解决了。

查了标签a的target属性后记录如下：

<a> 标签的 target 属性规定在何处打开链接文档。

如果在一个 <a> 标签内包含一个 target 属性，浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。如果这个指定名称或 id 的框架或者窗口不存在，浏览器将打开一个新的窗口，给这个窗口一个指定的标记，然后将新的文档载入那个窗口。从此以后，超链接文档就可以指向这个新的窗口。

在框架中打开窗口

不用打开一个完整的浏览器窗口，使用 target 更通常的方法是在一个 <frameset> 显示中将超链接内容定向到一个或者多个框架中。可以将这个内容列表放入一个带有两个框架的文档的其中一个框架中，并用这个相邻的框架来显示选定的文档：

<frameset cols="100,*">
  <frame src="toc.html">
  <frame src="pref.html" name="view_frame">
</frameset>

当浏览器最初显示这两个框架的时候，左边这个框架包含目录，右边这个框架包含前言。

这是 "toc.html" 的源代码：

<h3>Table of Contents</h3>
<ul>
  <li><a href="pref.html" target="view_frame">Preface</a></li>
  <li><a href="chap1.html" target="view_frame">Chapter 1</a></li>
  <li><a href="chap2.html" target="view_frame">Chapter 2</a></li>
  <li><a href="chap3.html" target="view_frame">Chapter 3</a></li>
</ul>

请注意，在文档 "toc.html" 中，每个链接的目标都是 "view_frame"，也就是右边的框架。

当用户从左边框架中的目录中选择一个链接时，浏览器会将这个关联的文档载入并显示在右边这个 "view_frame" 框架中。当其他链接被选中时，右边这个框架中的内容也会发生变化，而左边这个框架始终保持不变。

有 4 个保留的目标名称用作特殊的文档重定向操作：

_blank

浏览器总在一个新打开、未命名的窗口中载入目标文档。

_self

这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。

_parent

这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。

_top

这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

提示：这些 target 的所有 4 个值都以下划线开始。任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略，因此，不要将下划线作为文档中定义的任何框架 name 或 id 的第一个字符。