父页面 Father.htm 源码如下： 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>全面兼容的Iframe 与父页面交互操作</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <script language="javascript" type="text/javascript">
  7. function fatherFunction() {
  8. alert("我是父页面的方法,\n调用成功！");
  9. }
  10. /*
  11. *父页面通过 iframe Name 调用子页面的函数或者获取子页面元素的内容
  12. */
  13. function one() {
  14. var ifreame = window.frames["childPage1"];
  15. if (ifreame != null && ifreame != undefined) {
  16. ifreame.childFunction();
  17. }
  18. }
  19. function two() {
  20. var ifreame = window.frames["childPage1"];
  21. if (ifreame != null && ifreame != undefined) {
  22. var myValue = ifreame.document.getElementById("childPage");
  23. alert(myValue.innerHTML);
  24. }
  25. }
  26. /*
  27. *父页面通过 iframe Id 调用子页面的函数或者获取子页面元素的内容
  28. */
  29. function three() {
  30. var ifreame = window.top.document.getElementById("childPage2").contentWindow;
  31. if (ifreame != null && ifreame != undefined) {
  32. ifreame.childFunction();
  33. }
  34. }
  35. function four() {
  36. var ifreame = window.top.document.getElementById("childPage2").contentWindow;
  37. if (ifreame != null && ifreame != undefined) {
  38. var myValue = ifreame.document.getElementById("childPage");
  39. alert(myValue.innerHTML);
  40. }
  41. }
  42. </script>
  43. </head>
  44. <body style="margin: auto;">
  45. <fieldset>
  46. <legend>父页面通过 iframe Name 调用子页面的函数或者获取子页面元素的内容</legend>
  47. <dl>
  48. <dt>
  49. <input type="button" value="通过ifrme Name 调用子页面的脚本" onclick="one();" />
  50. <input type="button" value="通过ifrme Name 获取子页面元素的内容" onclick="two();" />
  51. </dt>
  52. <dt>
  53. <div style="width: 100%; height: 250px;">
  54. <iframe name="childPage1" src="Child1.htm" frameborder="0" scrolling="no" width="100%"
  55. height="250"></iframe>
  56. </div>
  57. </dt>
  58. </dl>
  59. </fieldset>
  60. <br />
  61. <fieldset>
  62. <legend>父页面通过 iframe Id 调用子页面的函数或者获取子页面元素的内容</legend>
  63. <dl>
  64. <dt>
  65. <input type="button" value="通过ifrme Name 调用子页面的脚本" onclick="three();" />
  66. <input type="button" value="通过ifrme Name 获取子页面元素的内容" onclick="four();" />
  67. </dt>
  68. <dt>
  69. <div style="width: 100%; height: 250px;">
  70. <iframe id="childPage2" src="Child2.htm" frameborder="0" scrolling="no" width="100%"
  71. height="250"></iframe>
  72. </div>
  73. </dt>
  74. </dl>
  75. </fieldset>
  76. </body>
  77. </html>
 
嵌入的 iframe 子页面 Child1.htm 源码如下： 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>全面兼容的Iframe 与父页面交互操作</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <script language="javascript" type="text/javascript">
  7. function childFunction() {
  8. alert("我是子页面,\n我需要使用 Iframe Name 调用！");
  9. }
  10. </script>
  11. </head>
  12. <body style="margin: auto; background-color: Gray; color: Red;">
  13. <input type="button" value="调用父页面的脚本" onclick="javascript:window.parent.fatherFunction();" /><br />
  14. <div id="childPage">
  15. 我是子页面,我需要使用 Iframe Name 调用！</div>
  16. </body>
  17. </html>

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

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

效果图如下：

 

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

  1. bug：页面交互操作引发的问题

    最近在测试一些h5页面,突然悟到一些测试点 需求点: 用户可以在页面领取礼物,领取的礼物在页面底部展示,用户点击礼物可调起分享弹窗,礼物超过一屏可左右滑动, bug的表现形式: 仅当礼物超过一屏时(一 ...

  2. iframe与父页面中JS执行顺序控制

    同事遇到了一个问题: 父页面中有几个iframe,初衷是父页面的JS通过AJAX获取数据,然后用于初始化iframe页面,可以结果却是有的iframe页面却不能获得数据. [问题根源] 父页面在加载i ...

  3. iframe与父页面传值

    最近做的项目中用到了不少iframe,而且需要实现: 从父页面获取iframe中某个元素的值或则从iframe页面获取其父页面上某个元素的值. 在网上查询了相关东西,后总结如下: (1)父页面获取if ...

  4. js对iframe内外（父子）页面进行操作

    dom对象推荐阅读 怎么对iframe进行操作,1.在iframe里面控制iframe外面的js代码.2.在父框架对子iframe进行操作. 获取iframe里的内容 主要的两个API就是conten ...

  5. 父页面操作iframe子页面的安全漏洞及跨域限制问题

    一.父子交互的跨域限制 同域情况下,父页面和子页面可以通过iframe.contentDocument或者parent.document来交互(彼此做DOM操作等,如父页面往子页面注入css). 跨域 ...

  6. js之iframe子页面与父页面通信

    iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 父页面parent.html <html> <head& ...

  7. IFrame父页面和子页面的交互

    现在在页面里面用到iframe的情况越来越少了,但有时还是避免不了,甚至这些页面之间还需要用js来做交互,那么这些页面如何操作彼此的dom呢?下面将会逐步介绍. 1.父页面操作子页面里面的dom 下面 ...

  8. 嵌入式iframe子页面与父页面js通信方式

    iframe框架中的页面与主页面之间的通信方式根据iframe中src属性是同域链接还是跨域链接,有明显不同的通信方式,同域下的数据交换和DOM元素互访就简单的多了,而跨域的则需要一些巧妙的方式来实现 ...

  9. JS中iframe子页面与父页面之间通信

    iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 父页面parent.html <html> <head& ...

随机推荐

  1. vuejs实现数据驱动视图原理

    什么是数据驱动 数据驱动是vuejs最大的特点.在vuejs中,所谓的数据驱动就是当数据发生变化的时候,用户界面发生相应的变化,开发者不需要手动的去修改dom. 比如说我们点击一个button,需要元 ...

  2. python日记---day1

    Life is  short,Test in  python 一.输入输出 1.用print()在括号中加上字符串,就可以向屏幕上输出指定的文字.比如输出'hello, world' print('h ...

  3. Python json转字符串的一些细节

    要调PHP那边的接口,php那边一直都校验不过,很是郁闷.没办法,只能让人把发送成功的代码拿过来看,不过是php写的,步骤都是一样: php端: 1. json对象转json字符串. 2. 对json ...

  4. 用JS获得QQ号码的昵称，头像，生日

    有一个网址,可以返回我们要的内容. http://r.qzone.qq.com/cgi-bin/user/cgi_personal_card?uin=指定QQ号码 将会返回下列内容: _Callbac ...

  5. 20155321 2016-2017-2 《Java程序设计》第七周学习总结

    20155321 2016-2017-2 <Java程序设计>第七周学习总结 教材学习内容总结 Date/DateFormat Date是日期类,可以精确到毫秒. 构造方法 Date() ...

  6. HDU 2079 选课时间 组合题

    解题报告:最多有8种学分的课,然后每种学分的课最多有10门,问要选学分为n的课一共有多少种选法,注意学分相同的课之间没有区别. 这题暴力可过,我用了8层循环,就简单了.听说可以用母函数,但没学过,看一 ...

  7. datatable表格框架服务器端分页查询设置

    更多内容推荐微信公众号,欢迎关注: js代码如下: $('#mytable').dataTable( { "bServerSide": true, //开启服务器模式,使用服务器端 ...

  8. HTML5之2D物理引擎 Box2D for javascript Games 系列 第一部分

    我要的是能在H5页面上跑的javascript版的Box2D啊!!! 最近想学习Javascript版本的Box2D JS物理引擎,无奈搜了半天也没找到相对比较系统的资料 官方网站也只是简单的介绍,A ...

  9. C# FileStream MemoryStream BufferedStream StreamReader StreamWriter

    FileStream读取文件 , array.Length);//读取流中数据把它写到字节数组中file.Close();//关闭流string str =Encoding.Default.GetSt ...

  10. 手动刷入Android 4.4.1 KOT49E OTA更新包

    一.Android 4.4 KitKat Google前段时间发布了Android新版本Android 4.4 KitKat,由于我的Nexus 4也是托朋友从US带回来的,所以很快就收到了Googl ...