iframe跨域传值、调方法

来源：互联网发布：java常量定义编辑：程序博客网时间：2024/05/23 01:58

iframe跨域传值或者调用方法，原理就是一个window可以获取跨域的window的iframe，但是不可以获取其他属性，而获取的这个iframe的window也一样可以获取跨域的其他window的iframe，而不可以获取该window其他属性，但是可以获取同域的。那就可以通过window一层层找到同域的其他window，获取其某个全局变量。
好像有点绕，简单来说就是：window获取跨域的window的iframe，而这个iframe的window的所有属性都可以获取。
好吧，好像还是没说清楚。。。上代码：
主页面main.html：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <script type="text/javascript">            window.onload = function(){                function fnInMain(){                    alert("这是父页面的方法");                }                var mainValue = "这是父页面的值";                /*                 * 1.获取ifram传来的值                 */                window.onstorage = function(){                    var data = window.localStorage.getItem("data");                    alert(data);                    window.localStorage.clear();                }                //也可以直接获取                setTimeout(function(){                    console.log(window.otherDomain.proxyMain.data)                },3000);                /*                 * 2.传值给跨域的iframe                 *  首先建立代理                 */                var proxyOther = document.createElement('iframe');                  proxyOther.name = 'proxyOtherDomain';                          proxyOther.style.display = 'none';                  document.body.appendChild(proxyOther);                //这一步是关键,当需要传其他值时可以改变这个src                proxyOther.src = 'http://localhost/proxyOtherDomain.html?data='+mainValue;                  /*                 * 3.传方法给子页面                 *  方法1：将方法传给mainValue变量，然后用eval调用                 *                   */                /*                 * 4.调用子页面方法，原理同上                 */            }        </script>    </head>    <body>        这是主页面        <div>            <iframe src="http://localhost/otherDomain.html" name="otherDomain" width="" height=""></iframe>        </div>    </body></html>

跨域的子页面otherDomain.html：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript">            function fnInOther(){                alert("这是子页面的方法");            }            window.onload = function(){                var otherValue = "这是子页面的值";                //首先建立代理                var proxyMain = document.createElement('iframe');                  proxyMain.name = 'proxyMain';                          proxyMain.style.display = 'none';                  document.body.appendChild(proxyMain);                /*                 * 1.传值                 *  值可能是经过处理动态生成的，所以用setTimeout模拟一下                 */                setTimeout(function(){                    proxyMain.src = 'http://127.0.0.1:8020/transforifram/proxyMain.html?data='+otherValue;                  },2000);                /*                 * 2.获取父页面传来的值                 */                window.onstorage = function(){                    var data = window.localStorage.getItem("data");                    alert(data);                    window.localStorage.clear();                }                //也可以直接获取                setTimeout(function(){                    console.log(window.parent.proxyOtherDomain.data)                },3000);                /*                 * 3.调用父页面的方法                 *  方法1：可以用传值的方法传方法，然后eval("("+window.parent.proxyOtherDomain.data+")()");                 *                   */                /*                 * 4.将方法传给父页面，原理同上                 */            }           </script>    </head>    <body>        这是跨域的子页面需要    </body></html>

还有两个用来代理的页面，与mian.html同域的proxyMain.html

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript">            //获取到要传的值            var data = location.search.split("=")[1];//data=。。。            //如果有中文            data = decodeURI(data);            //使用window.localStorage存值，主页面可以调用事件获取该值，也可以用其他办法。            window.localStorage.setItem("data",data);        </script>    </head>    <body>        与父页面同域，ifram传值给这个页面，再传给父页面。    </body></html>

另一个是与otherDomain.html同域的proxyOtherDomain.html

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript">            //处理值            var data = location.search.split("=")[1];//data=。。。            //如果有中文            data = decodeURI(data);            //使用window.localStorage存值            window.localStorage.setItem("data",data);        </script>    </head>    <body>        与跨域的iframe同域，父页面传值给这个页面，再传给iframe。    </body></html>

大概讲一下思路：
当需要传值时，通过代理页面的url传递，代理页面用location.search获取传来的值，再用localStorage存值，就可以出发同域页面的onstorage 事件。
传方法有很多方式，其中一种就是把它当做值来传，用eval函数调用，个人感觉不够优雅。
还有的方式就不写了，因为空调坏了，战斗力归零。反正原理很简单，一看就懂。
最后截图一张：
这里写图片描述

阅读全文

0 0