前言
最近,老大分配给我的任务中,使用到了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的方式运行,就没有问题了。
因为LZ也是在网上查阅各位大佬的资料及自己的理解写的,在开头已经贴出原文地址。若果有错误,万望指正;如果涉及侵权,请联系本人删除。