通用版解决跨域问题，父页面获取iframe里面的内容

 

父页面获取iframe里面内容的解决方案如下：

 

实验如下：开两个服务器，一个端口9000，一个端口9001

现在在9000页面要放一个iframe指向9001的一个页面，再在9000父页面打印9001iframe里面的东西是访问不了的，提示跨域了，端口不一样 

 

 

现在的目标：父页面127.0.0.1:9000访问自己iframe src=127.0.0.1:9001里面的内容

解决这个问题的方案的思路：

1、在127.0.0.1:9000页面使用js代码动态增加一个iframe其src指向与127.0.0.1:9001同级目录下的一个页面execB.html

2、然后先去9001创建好这个页面execB.html，并确保能访问到。

3、在127.0.0.1:9001/execB.html中，去做想做的js操作（如调用127.0.0.1:9001中的一个js函数，或者改变背景色等都在这个页面进行）

 

 

原理解释：9000页面现在有两个iframe，一个访问9001，一个是动态增加的访问9001/execB.html，9000加载完后返回9001的….标签，此时，9001/execB.html也返回了，但是9001/execB.html里面有操作9001的DOM的js代码如：parent.window.frames[“myframe9000”].document.getElementById(“test”).innerHTML，这样就相当于9001/execB.html再操作9001里面的DOM，就能够操作成功

 

具体代码如下：

127.0.0.1:9000

html代码: 

 

js代码：

 

window.οnlοad=function (ev) {
    function exec_iframe(){
    if(typeof(exec_obj)=='undefined'){
        exec_obj = document.createElement('iframe');
        exec_obj.name = 'tmp_frame';
        exec_obj.src = 'http://127.0.0.1:9001/execB';
        exec_obj.style.display = 'none';
        document.body.appendChild(exec_obj);//动态创建一个iframe
    }else{
        exec_obj.src = 'http://127.0.0.1:9001/execB?' + Math.random();
    }
  }

  exec_iframe()
}

 

127.0.0.1 :9001

html代码(目标id=notebook里面的内容被获取，被显示，颜色更改)：

    
    


test9001

    
这个页面放到iframe里面，目标获取这里的内容就算成功


目标获取这里的内容就算成功

 

127.0.0.1:9001/execB.html（真正做取值的js页面，被动态添加到9000页面iframe）

js代码（去操作同一个域名下的127.0.0.1:9001的内容获取id=notebook里面的内容）: 

至此，跨域访问成功～