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

落日映苍穹つ 2022-05-26 03:49 182阅读 0赞

# #

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

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

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

![70][]

**现在的目标：父页面****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的<body><html>….</html></body>标签，此时，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代码:

![70 1][]

js代码：

127.0.0.1 :9001

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

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    test9001
    <div id="notebook">
        <p>这个页面放到iframe里面，目标获取这里的内容就算成功</p>
    </div>
    </body>
    </html>目标获取这里的内容就算成功</p>
    </div>
    </body>
    </html>

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

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

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    </body>
    </html>
    <script src="http://lib.baomitu.com/jquery/3.3.1/jquery.js"></script>
    <script>
       //jquery操作方式，变个颜色
       // $('#notebook', window.parent.myframe.document).css("backgroundColor","red")
    
       //js的操作方式，变个颜色
       parent.window.frames["myframe"].document.getElementById("notebook").style.backgroundColor = "green";
    
       var temp = parent.window.frames["myframe"].document.getElementById("notebook").innerHRML;//取值
       console.log(temp)
    </script>

**至此，跨域访问成功～**

[70]: /images/20220526/2753102b57604ecc83399771dac7b7bf.png
[70 1]: /images/20220526/ecb81240fb19477d8ed4d843c7682a93.png