iframe框架用法

1.iframe标签：

<iframe src="demo1.html" name="qiuqiu_Page" frameborder="0" width="500" height="500" scrolling="no"></iframe>

属性	值	描述
align	left right top middle bottom	不赞成使用。请使用样式代替。 规定如何根据周围的元素来对齐此框架。
frameborder	1 0	规定是否显示框架周围的边框。
height	pixels %	规定 iframe 的高度。
longdesc	URL	规定一个页面，该页面包含了有关 iframe 的较长描述。
marginheight	pixels	定义 iframe 的顶部和底部的边距。
marginwidth	pixels	定义 iframe 的左侧和右侧的边距。
name	frame_name	规定 iframe 的名称。
sandbox	"" allow-forms allow-same-origin allow-scripts allow-top-navigation	启用一系列对 <iframe> 中内容的额外限制。
scrolling	yes no auto	规定是否在 iframe 中显示滚动条。
seamless	seamless	规定 <iframe> 看上去像是包含文档的一部分。
src	URL	规定在 iframe 中显示的文档的 URL。
srcdoc	HTML_code	规定在 <iframe> 中显示的页面的 HTML 内容。
width	pixels %	定义 iframe 的宽度。

2.子页面调用父页面的对象方法：

父页面中：<div id="cs1"></div>

$("#cs1").data("petName", "qiuqiu");

　　　　　　function getPetName() {
　　　　　　　　var p_name = $("#cs1").data("petName");
　　　　　　　　alert( p_name);
　　　　　　}

子页面： <button type="button" id="gt_pName" class="btn btn-info btn-lg">点击获取宠物名称</button>

　　　　$('#gt_pName').bind('click', function () {
　　　　　　window.parent.getPetName();
　　　　})

执行结果：

3.父页面调用子页面的方法：

父页面： <input type="button" id="gt_pName" class="btn btn-default" value="点击获取宠物的名字" />

$("#gt_pName").bind('click', function () {
　　window.frames["qiuqiu_Page"].getPetName();
})

子页面：

function getPetName() {
　　var p_name = $("#child_pt").data("petName");
　　alert(p_name);
}

总结：

父页面调用子页面方法：window.frames["frame的名称"].function();

子页面调用父页面方法：window.parent.fn();