iframe嵌套页面跨域

最新推荐文章于 2024-07-30 17:12:31 发布

weixin_30542079

最新推荐文章于 2024-07-30 17:12:31 发布

阅读量925

点赞数

文章标签： c# 测试 json

原文链接：http://www.cnblogs.com/cxx8181602/p/11174662.html

版权

父级调用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>

转载于:https://www.cnblogs.com/cxx8181602/p/11174662.html

weixin_30542079

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
iframe嵌套页面跨域

父级调用iframe方法：document.getElementById("iframe").contentWindow.func(data1,data2...)子级 iframe中调用父级html中方法：parent.func(data1,data2...)使用的前提条件是要在同域名下，想要如果域名不同，甚至端口不同，都会存在跨域的问题。简单示例d...
复制链接

扫一扫