父级调用iframe方法:

  1. document.getElementById("iframe").contentWindow.func(data1,data2...)

子级 iframe中调用 父级html中方法:

  1. parent.func(data1,data2...)

使用的前提条件是要在同域名下,想要如果域名不同,甚至端口不同,都会存在 跨域 的问题。

简单示例demo:   

a.html 页面

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>A</title>
  5. </head>
  6. <body>
  7. 父级:A页面<br/>
  8. <textarea id="a_text">来自B页面密码...</textarea><br/>
  9. <button id="a_button">A页面获取B页面数据</button><br/><br/>
  10. <iframe src="b.html" width="500px" height="200px" id="iframe"></iframe>
  11. <!-- <iframe src="b.html" width="500px" height="200px" id="iframe" frameborder="0" scrolling="no" style="position:absolute;right:0;left:0"></iframe> -->
  12. <script>
  13. document.getElementById("a_button").onclick = function(){
  14.     alert(document.getElementById("iframe").contentWindow.document.getElementById("b_text").value);
  15.   }
  16. </script>
  17. </body>
  18. </html>

b.html 页面

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>B</title>
  5. </head>
  6. <body>
  7. 子级:B页面<br/>
  8. <textarea id="b_text">来自A页面密码...</textarea><br/>
  9. <button id="b_button">B页面获取A页面数据</button><br/>
  10. <script>
  11. document.getElementById("b_button").onclick = function(){
  12. alert(parent.document.getElementById("a_text").value);
  13. }
  14. </script>
  15. </body>
  16. </html>

使用window.postMessage方法解决跨域:

简单示例demo:

a.html 页面

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>A</title>
  5. </head>
  6. <body>
  7. 父级:A页面<br/><br/>
  8. <iframe src="b.html" width="500px" height="200px" id="iframe"></iframe>
  9. <script>
  10. window.addEventListener('message', function(e) {
  11. alert(JSON.stringify(e.data));
  12. console.log('获取子级B页面返回值:');
  13. console.log(e.data);
  14. })
  15.  
  16. </script>
  17. </body>
  18. </html>

b.html 页面

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>B</title>
  5. </head>
  6. <body>
  7. 子级:B页面<br/>
  8. <button id="b_button">B页面发送A页面数据</button><br/>
  9. <script>
  10. document.getElementById("b_button").onclick = function(){
  11. var param = {'name':'admin'};
  12. window.parent.postMessage(param,'*');
  13. }
  14. </script>
  15. </body>
  16. </html>

iframe嵌套页面 跨域的更多相关文章

  1. window.postMessage()实现(iframe嵌套页面)跨域消息传递

    window.postMessage()方法可以安全地实现Window对象之间的跨域通信.例如,在页面和嵌入其中的iframe之间. 不同页面上的脚本允许彼此访问,当且仅当它们源自的页面共享相同的协议 ...

  2. easyui 中iframe嵌套页面,大弹窗自适应居中的解决方法。$('#win').window()

    easyui 中iframe嵌套页面,大弹窗自适应居中的解决方法.$('#win').window() 以下是左边栏和头部外层遮罩显示和隐藏方法 /*外层 遮罩显示*/ function wrapMa ...

  3. easyui 中iframe嵌套页面,提示弹窗遮罩的解决方法,parent.$.messager.alert和parent.$.messager.confirm

    项目中用到easyui 布局,用到north,west,center三个区域,且在center中间区域嵌入iframe标签.在主内容区做一些小提示弹窗(例如删除前的弹窗提示确认)时,会遇到遮罩问题,由 ...

  4. iframe中涉及父子页面跨域问题

    什么是跨域? 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器施加的安全限制.所谓同源是指相同的域名.协议和端口,只要其中一项不同就为跨域. 举几个例子: http:/ ...

  5. 页面跨域与iframe通信(Blocked a frame with origin)

    项目中有个需求是在前后端分离的情况下,前台页面将后台页面加载在预留的iframe中:但是遇到了iframe和主窗口双滚动条的情况,由此引申出来了问题: 只保留单个滚动条,那么就要让iframe的高度自 ...

  6. iframe中子父页面跨域通讯

    目录 #跨域发送信息 #跨域接收信息 #示例Demo 在非跨域的情况下,iframe中的子父页面可以很方便的通讯,但是在跨域的情况下,只能通过window.postMessage()方法来向其他页面发 ...

  7. 黄聪:利用iframe实现ajax 跨域通信的解决方案(转)

    原文:http://www.cnblogs.com/xueming/archive/2013/02/01/crossdomainajax.html 在漫长的前端开发旅途上,无可避免的会接触到ajax, ...

  8. 使用 iframe + postMessage 实现跨域通信

    在实际项目开发中可能会碰到在 a.com 页面中嵌套 b.com 页面,这时第一反应是使用 iframe,但是产品又提出在 a.com 中操作,b.com 中进行显示,或者相反. 1.postMess ...

  9. iframe无刷新跨域并获得返回值

    参考:http://geeksun.iteye.com/blog/1070607 /** * iframe跨域提交大数据 * @param action 跨域地址 * @param arr [ {na ...

随机推荐

  1. ubuntu 个人常用命令

    重启命令 :     1.reboot     2.shutdown -r now 立刻重启    3.shutdown -r 10 过10分钟自动重启    4.shutdown -r 20:35 ...

  2. msql 事务

    START TRANSACTION      delete from t_emp    delete from t_deptcommit START TRANSACTION delete from t ...

  3. hdu2444The Accomodation of Students (最大匹配+判断是否为二分图)

    题意 首先判断所有的人可不可以分成两部分,每部分内的所有人都相互不认识.如果可以分成 则求两部分最多相互认识的对数. 解题 类似分成两组,同组互不相关,就可能使判断是否为二分图 能否分成两部分 则是判 ...

  4. 开发跨平台应用解决方案-uniapp 真心不错,支持一波

    uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS.Android.微信小程序等多个平台. 用了mui,H5+一年多了,感觉dcloud 最近推出的 ...

  5. MUI沉浸式代码

    var ben_immer = (function() { var immersed = 0; var ms = (/Html5Plus\/.+\s\(.*(Immersed\/(\d+\.?\d*) ...

  6. shell脚本之删除内容相同的重复文件

    #!/bin/bash #!当前文件夹下,删除内容相同的重复文件,只保留重复文件中的一个. ls -lS --time-style=long-iso | awk 'BEGIN{ getline;get ...

  7. Windows PyCharm QtDesigner/pyuic5配置

    QtDesigner 配置成功截图如下: C:\ProgramData\Anaconda3\Library\bin\designer.exe $FileDir$ pyuic5 配置成功截图如下: C: ...

  8. VMware虚拟机中CentOS/redhat设置固定IP

    你的笔记本中的VMware中redhat或centOS系统,如果想在上面建站,而又如果你需要在家里和公司都能访问该站(至少希望你自己的笔记本能访问),那么就需要将虚拟机IP设置为固定IP了.以下介绍两 ...

  9. centos7 mysql 各种报错

    1.重置root密码 vi /etc/my.cnf 添加skip-grant-tables service mysqld restart 2.mysql 登录 报错1 Unknown system v ...

  10. 恢复HDFS文件删除后的方法

    HDFS 为我们提供了垃圾箱的功能,也就是当我们执行 hadoop fs -rmr xxx 命令之后,文件并不是马上被删除,而是会被移动到执行这个操作用户的 .Trash 目录下,等到一定的时间后才会 ...