父级调用iframe方法：

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

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

parent.func(data1,data2...)

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

简单示例demo:   

a.html 页面

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>A</title>

</head>

<body>

    父级：A页面<br/>

    <textarea id="a_text">来自B页面密码...</textarea><br/>

    <button id="a_button">A页面获取B页面数据</button><br/><br/>

    <iframe src="b.html" width="500px" height="200px" id="iframe"></iframe>

<!--     <iframe src="b.html" width="500px" height="200px" id="iframe" frameborder="0" scrolling="no" style="position:absolute;right:0;left:0"></iframe> -->

    <script>

    document.getElementById("a_button").onclick = function(){

　　　　alert(document.getElementById("iframe").contentWindow.document.getElementById("b_text").value);

　　}

    </script>

</body>

</html>

b.html 页面

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>B</title>

</head>

<body>

    子级：B页面<br/>

    <textarea id="b_text">来自A页面密码...</textarea><br/>

    <button id="b_button">B页面获取A页面数据</button><br/>

    <script>

    document.getElementById("b_button").onclick = function(){

        alert(parent.document.getElementById("a_text").value);

    }

    </script>

</body>

</html>

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

简单示例demo：

a.html 页面

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>A</title>

</head>

<body>

    父级：A页面<br/><br/>

    <iframe src="b.html" width="500px" height="200px" id="iframe"></iframe>

    <script>

        window.addEventListener('message', function(e) {

            alert(JSON.stringify(e.data));

            console.log('获取子级B页面返回值:');

            console.log(e.data);

        })

    </script>

</body>

</html>

b.html 页面

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>B</title>

</head>

<body>

    子级：B页面<br/>

    <button id="b_button">B页面发送A页面数据</button><br/>

    <script>

    document.getElementById("b_button").onclick = function(){

        var param = {'name':'admin'};

        window.parent.postMessage(param,'*');

    }

    </script>

</body>

</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. php开发环境推荐使用

    万丈高楼平地起,好用得环境才能建立宏伟大厦,php开发环境推荐使用 1,自己安装 lamp 环境 linux+apache+mysql+php 2,自己安装 lnmp 环境 linux+nginx+m ...

  2. zk ui安装 (选装，页面查看zk的数据)

    # 使用WEB UI查看监控集群-zk ui安装 cd /usr/local git clone https://github.com/DeemOpen/zkui.git yum install -y ...

  3. 【转】golang 交叉编译

    问题 golang如何在一个平台编译另外一个平台可以执行的文件.比如在mac上编译Windows和linux可以执行的文件.那么我们的问题就设定成:如何在mac上编译64位linux的可执行文件. 解 ...

  4. vi命令（待更新）

    第一部分: 0:光标到本行行首$:光标到本行行尾 ^:本行第一个非blank的位置g_:本行最后一个非blank的位置 a:光标后插入(insert是光标前插入字符)o:当前行后加入新行O:当前行钱加 ...

  5. Vim安装插件支持 MarkDown 语法、实时预览等

    使用 markdown-preview.vim 插件可以实时通过浏览器预览 markdown 文件 使用该插件需要 vim 支持py2/py3 安装 使用 vim-plug: 在 .vimrc 或 i ...

  6. nginx的rewrite

    nginx服务的rewrite nginx后端服务的指令 1)upstream指令 :设置后端服务器组的主要指令 Upstream name {} 2)server指令:用于设定组内的服务器 3)Ip ...

  7. Java内部类的整理。

    Java 内部类 分四种:成员内部类.局部内部类.静态内部类和匿名内部类. 成员内部类: (1)即作为外部类的一个成员存在,与外部类的属性.方法并列. 注意:成员内部类中不能定义静态变量,但可以访问外 ...

  8. jquery 中 html与text函数的区别

    jquery 中 html与text函数的区别 共同点:它们都能讲函数中的参数渲染到页面中: 异同点: text() 只是简单的讲参数的内容写入到页面中: html() 会根据参数的值,判断是否字体符 ...

  9. ARM仿真器之驱动黄色惊叹号

    JLink CDC UART PORT 黄色惊叹号 Windows 无法验证此设备所需的驱动程序的数字签名.某软件或硬件最近有所更改,可能安装了签名错误或损毁的文件,或者安装的文件可能是来路不明的恶意 ...

  10. springcloud 高可用的服务注册中心

    https://blog.csdn.net/forezp/article/details/81041101 上面是方老师的博客,看liuyan也有好多同学不是很清楚,这里自己也记录一下具体的做法. 1 ...