全面兼容的Iframe 与父页面交互操作
- <!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>
- <!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& ...
随机推荐
- HDU 2814 斐波那契循环节 欧拉降幂
一看就是欧拉降幂,问题是怎么求$fib(a^b)$,C给的那么小显然还是要找循环节.数据范围出的很那啥..unsigned long long注意用防爆的乘法 /** @Date : 2017-09- ...
- idea 常用快捷使用
一.智能提示 1.快速移动到错误代码 :Shift+F2 或者 f2/ 2.快速修复:Alt+Enter 3.快速生成括号:Ctrl+Shift+Enter 二.重构 1.重构功能汇总:Ctrl+Sh ...
- JavaScript语法对{}的奇葩处理
JavaScript的语法有多坑,算是众人皆知了. 今天看到vczh的这条微博:http://weibo.com/1916825084/B7qUFpOKb , 代码如下: {} + []; [] + ...
- [转载]学习C语言基本思路与参考书籍
http://zhuanlan.zhihu.com/linjr/19694823 计算机行业发展非常快,大学里的教育基本都跟不上实际的社会需求.如果你所在的学校还在指定大家使用谭浩强的教材,或使用VC ...
- Linux IO调度算法
Linux IO调度算法 操作系统的调度 CPU调度 CPU scheduler IO调度 IO scheduler IO调度器的总体目标是希望让磁头能够总是往一个方向移动,移 ...
- Python概念-反射之文化底蕴版:反正射了
什么是反射 光在两种物质分界面上改变传播方向又返回原来物质中的现象,叫反射! 以上,是反射的物理定义,与python中的反射概念,完全没有任何关系 书归正传:反射 就是通过字符串的形式,操作对象相关的 ...
- c# 超长字符串截取固定长度后显示...(超长后面显示点点点) 通用方法
通用方法: 此方法是采用unicode编码方式,一个汉字为2个字节,一个数字or字母是1个字节,此方法传入的第二个长度参数是unicode长度. 所以不用考虑截取的字符串是汉字还是英文字母的问题,参数 ...
- 十大opengl教程
正文: 1. http://nehe.gamedev.net/ 这个是我觉得全世界最着名的OpenGL教程,并且有网友将其中48个教程翻译成了中文http://www.owlei.com/Dancin ...
- IE安全系列之——RES Protocol
IE安全系列之--RES Protocol res Protocol用于从一个文件里面提取指定资源.语法为:res://sFile[/sType]/sID 各Token含义: sfile:百分号编码. ...
- Shell-脚本只能运行1次
用空文件进行判断 path=`pwd` if [ -f ${path}/.runned ]; then { echo "This script can only execute once! ...