全面兼容的Iframe 与父页面交互操作

父页面 Father.htm 源码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>全面兼容的Iframe 与父页面交互操作</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript">
function fatherFunction() {
alert("我是父页面的方法,\n调用成功！");
}
/*
*父页面通过 iframe Name 调用子页面的函数或者获取子页面元素的内容
*/
function one() {
var ifreame = window.frames["childPage1"];
if (ifreame != null && ifreame != undefined) {
ifreame.childFunction();
}
}
function two() {
var ifreame = window.frames["childPage1"];
if (ifreame != null && ifreame != undefined) {
var myValue = ifreame.document.getElementById("childPage");
alert(myValue.innerHTML);
}
}
/*
*父页面通过 iframe Id 调用子页面的函数或者获取子页面元素的内容
*/
function three() {
var ifreame = window.top.document.getElementById("childPage2").contentWindow;
if (ifreame != null && ifreame != undefined) {
ifreame.childFunction();
}
}
function four() {
var ifreame = window.top.document.getElementById("childPage2").contentWindow;
if (ifreame != null && ifreame != undefined) {
var myValue = ifreame.document.getElementById("childPage");
alert(myValue.innerHTML);
}
}
</script>
</head>
<body style="margin: auto;">
<fieldset>
<legend>父页面通过 iframe Name 调用子页面的函数或者获取子页面元素的内容</legend>
<dl>
<dt>
<input type="button" value="通过ifrme Name 调用子页面的脚本" onclick="one();" />
<input type="button" value="通过ifrme Name 获取子页面元素的内容" onclick="two();" />
</dt>
<dt>
<div style="width: 100%; height: 250px;">
<iframe name="childPage1" src="Child1.htm" frameborder="0" scrolling="no" width="100%"
height="250"></iframe>
</div>
</dt>
</dl>
</fieldset>
<br />
<fieldset>
<legend>父页面通过 iframe Id 调用子页面的函数或者获取子页面元素的内容</legend>
<dl>
<dt>
<input type="button" value="通过ifrme Name 调用子页面的脚本" onclick="three();" />
<input type="button" value="通过ifrme Name 获取子页面元素的内容" onclick="four();" />
</dt>
<dt>
<div style="width: 100%; height: 250px;">
<iframe id="childPage2" src="Child2.htm" frameborder="0" scrolling="no" width="100%"
height="250"></iframe>
</div>
</dt>
</dl>
</fieldset>
</body>
</html>

嵌入的 iframe 子页面 Child1.htm 源码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>全面兼容的Iframe 与父页面交互操作</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript">
function childFunction() {
alert("我是子页面,\n我需要使用 Iframe Name 调用！");
}
</script>
</head>
<body style="margin: auto; background-color: Gray; color: Red;">
<input type="button" value="调用父页面的脚本" onclick="javascript:window.parent.fatherFunction();" /><br />
<div id="childPage">
我是子页面,我需要使用 Iframe Name 调用！</div>
</body>
</html>

嵌入的 iframe 子页面 Child2.htm 源码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>全面兼容的Iframe 与父页面交互操作</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" language="javascript">
function childFunction() {
alert("我是 iframe 嵌入的子页面，\n需要通过 Iframe Id 调用！");
}
</script>
</head>
<body style="margin: auto; background-color: Gray; color: Red;">
<input type="button" value="调用父页面的脚本" onclick="javascript:window.parent.fatherFunction();" /><br />
<div id="childPage">
我是 iframe 嵌入的子页面，需要通过Id调用！
</div>
</body>
</html>

效果图如下：

全面兼容的Iframe 与父页面交互操作的更多相关文章

bug：页面交互操作引发的问题
最近在测试一些h5页面,突然悟到一些测试点需求点: 用户可以在页面领取礼物,领取的礼物在页面底部展示,用户点击礼物可调起分享弹窗,礼物超过一屏可左右滑动, bug的表现形式: 仅当礼物超过一屏时(一 ...
iframe与父页面中JS执行顺序控制
同事遇到了一个问题: 父页面中有几个iframe,初衷是父页面的JS通过AJAX获取数据,然后用于初始化iframe页面,可以结果却是有的iframe页面却不能获得数据. [问题根源] 父页面在加载i ...
iframe与父页面传值
最近做的项目中用到了不少iframe,而且需要实现: 从父页面获取iframe中某个元素的值或则从iframe页面获取其父页面上某个元素的值. 在网上查询了相关东西,后总结如下: (1)父页面获取if ...
js对iframe内外（父子）页面进行操作
dom对象推荐阅读怎么对iframe进行操作,1.在iframe里面控制iframe外面的js代码.2.在父框架对子iframe进行操作. 获取iframe里的内容主要的两个API就是conten ...
父页面操作iframe子页面的安全漏洞及跨域限制问题
一.父子交互的跨域限制同域情况下,父页面和子页面可以通过iframe.contentDocument或者parent.document来交互(彼此做DOM操作等,如父页面往子页面注入css). 跨域 ...
js之iframe子页面与父页面通信
iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信父页面parent.html <html> <head& ...
IFrame父页面和子页面的交互
现在在页面里面用到iframe的情况越来越少了,但有时还是避免不了,甚至这些页面之间还需要用js来做交互,那么这些页面如何操作彼此的dom呢?下面将会逐步介绍. 1.父页面操作子页面里面的dom 下面 ...
嵌入式iframe子页面与父页面js通信方式
iframe框架中的页面与主页面之间的通信方式根据iframe中src属性是同域链接还是跨域链接,有明显不同的通信方式,同域下的数据交换和DOM元素互访就简单的多了,而跨域的则需要一些巧妙的方式来实现 ...
JS中iframe子页面与父页面之间通信
iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信父页面parent.html <html> <head& ...

随机推荐

Spring Resource 类图
插播个广告老丈人家的粉皮儿,农产品,没有乱七八糟的添加剂,欢迎惠顾
bzoj千题计划130：bzoj1305: [CQOI2009]dance跳舞
http://www.lydsy.com/JudgeOnline/problem.php?id=1305 每个人拆为喜欢(yes)和不喜欢(no)两个点二分答案 1.每两个人之间只能跳一次喜欢则 ...
[Apio2012]dispatching 主席树做法
bzoj 2809: [Apio2012]dispatching http://www.lydsy.com/JudgeOnline/problem.php?id=2809 Description 在一 ...
Linux文件系统_每一个的意义
2017年1月10日, 星期二 Linux文件系统_每一个的意义 rootfs: 根文件系统 FHS:Linux /boot: 系统启动相关的文件,如内核.initrd,以及grub(bootload ...
取消IE下的叉
之前写项目的时候碰到一个小问题,因为IE下的那个叉触发不了我的change事件,所以只好把IE给加上去的那个叉去了,在此记录一下. ::-ms-clear{display:none;} ::-ms-r ...
Linux常用的20个命令
以下为20个命令 1.ls命令:ls命令式列出目录内容(List Directory Contents)的意思.运行它就是列出文件夹里面的内容,可能是文件也可能是文件夹. root@tecmint:~ ...
Vim，Emacs排名不分先后
关键词:Vim,Emacs,Vim和Emacs之争一同时提到vim和emacs,就几乎一定引发关于哪个更好的圣战.据说这个圣战从很早就开始了,偶尔还会有windows下的ultraedit的用户来凑 ...
select 函数小结 -- 转自百度知道
http://zhidao.baidu.com/link?url=UVTXeK4ncKmnwatGUW2deMFylNYBuur-zHmK3w53NXNRpgPbhld2WdkMD766nKl_6Hj ...
sqlalchemy操作数据库（二）
sqlalchemy的基本操作表结构如下: from sqlalchemy import create_enginefrom sqlalchemy.ext.declarative importdec ...
textarea保留换行和空格
<style> pre {white-space: pre-wrap;} </style> //替换textare <pre class="feedback_q ...

全面兼容的Iframe 与父页面交互操作

全面兼容的Iframe 与父页面交互操作的更多相关文章

随机推荐

热门专题