Frame的使用

最新推荐文章于 2021-07-01 20:03:58 发布

指尖的星光xl

最新推荐文章于 2021-07-01 20:03:58 发布

阅读量7.4k

点赞数 10

分类专栏：前端文章标签：使用总结

前端专栏收录该内容

10 篇文章

订阅专栏

本文详细解析了HTML中frame和iframe技术的使用方法，包括它们的基本语法、属性配置及页面间的数据传递技巧，同时对比了两者在实际应用中的优缺点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

最近，老大分配给我的任务中，使用到了frame这个技术。因为之前只是了解到使用frame可以将多个页面组合到一起，但是我并没有使用过。所以此时我是一脸懵逼的使用，中间遇到的很多的坑。鉴于此，决心学习一下frame的使用。

参考资料

一、frame的作用

frame从字面上解释是框架、结构的意思。HTML对于复杂的网页，提供了各个小网页进行合并的功能。就是说，你可以使用各个小网页最终在一个大的整个的网页上显示出效果。这样对于开发和维护都是非常有好处的。这个技术就是frame。注意HTML5不再支持使用frame。如果想要完成不同网页的组合，可以选择可以使用在html中使用frameset或者iframe实现。

frameset的简单使用

1、相关属性

frame中的是属性如下图所示：

2、简单实用

<!--frameset的使用-->
<html>
  <head>
    <title>all.html</title>
  </head> 
  <frameset rows="20%,*" frameborder="no">
  		<frame src="top.htm"/>
  		<frameset cols="15%,*">
  				<frame src="left.htm" noresize="noresize" /> 				
  				<frame src="right.htm" noresize="noresize" name="right"/>
  		</frameset> 		
  </frameset>
</html>

3、frame页面之间传值

二、iframe的使用

1、使用例子

<html>
<body>
<p>用?iframe?可以在HTML文件里显示另一个网页。</p>
<iframe src="testIframe.htm"></iframe>
</body>
</html>

2、属性和frame基本一样

iframe 的常用属性： 
        name ：  规定 <iframe> 的名称。
        width： 规定 <iframe> 的宽度。
        height ：规定 <iframe> 的高度。
        src ：规定在 <iframe> 中显示的文档的 URL。
        frameborder ： 规定是否显示 <iframe> 周围的边框。 (0为无边框，1位有边框)。
        align ：　 规定如何根据周围的元素来对齐 <iframe>,  (left,right,top,middle,bottom)。
        scrolling ： 规定是否在 <iframe> 中显示滚动条。 (yes,no,auto)
eg:
<iframe id="ifmOPHead" runat="server" width="100%" height="100%" 
frameborder="0" scrolling="no" marginheight="0"marginwidth="0"></iframe>

3、iframe页面之间传值

1、获取iframe中的数据(方式一)

	  //获取iframe标签
    var iframe = document.getElementById("myrame"); 
  	 //获取iframe的window对象
    var iwindow = iframe.contentWindow; 
   	 //获取iframe的document对象
    var idoc = iwindow.document; 
  	//获取iframe的html
    console.log(idoc.documentElement); 
    console.log("body",idoc.body);
     也可以直接写成如下形式：
JS:
document.getElementById('_frame').contentWindow.document.getElementById("btnRefurbish").click();
JQ:
$("#_frame").contents().find("#btnRefurbish").click();

2、获取iframe页面中的数据（方式二）

parent.jsp（父页面）

<html>
<head>
    <script type="text/javascript">
        function say(){
            alert("parent.jsp");
        }
        function callChild(){
            myFrame.window.say();
            myFrame.window.document.getElementById("button").value="调用结束";
            myFrame.window.document.getElementById("label").value="权益实例";
        }
    </script>
</head>
<body>
<input id="button" type="button" value="调用child.html中的函数say()" onclick="callChild()"/>
<iframe id="myFrame" name="myFrame" src="child.jsp"></iframe>
</body>
</html>

child.jsp（子页面）

<html>
<head>
    <script type="text/javascript">
        function say(){
            alert("child.jsp");
        }
        function callParent(){
            parent.say();
            parent.window.document.getElementById("button").value="调用结束";
        }
    </script>
</head>
<body>
<input id="button" type="button" value="调用parent.jsp中的say()函数" onclick="callParent()"/>
<input id="label" name="父页面的值">
</body>
</html>

注意：如果直接运行后缀名为.html的文件，可能会出现异常，如下图所示：
在这里插入图片描述
Uncaught SecurityError: Blocked a frame with origin “null” from accessing a frame with origin “null”。表示：未捕获的安全错误：阻止了一个域为null的frame页面访问另一个域为null的页面。这是跨域异常。地址栏是file:///的页面，放置到服务器中即可。其中的一种解决方案如上例所示，我将页面改为以jsp的方式运行，就没有问题了。