同学：“这个 iframe 元素我咋获取不到啊？”-五八三

背景

故事起源于昨晚，我有个朋友问我了一个问题，场景是这样的。

他的页面自己写了一个 div，然后通过一些调用内嵌了一个外部的 iframe，这个 iframe 就是一个外部 ide，但是我们每次打开的时候，会有一个弹窗广告，这个是提供 iframe 的公司所给的，他想要通过操作 DOM 的形式把这个“广告弹窗”给删除掉，但是一直没法获取到这里面的 DOM 结构。

然后我就让他用这个写法获取：


var myFrame = document.getElementById('myFrame');
var iframeDocument = myFrame.contentDocument || myFrame.contentWindow.document;
var myFrame = document.getElementById('myFrame');
var iframeDocument = myFrame.contentDocument || myFrame.contentWindow.document;
var myFrame = document.getElementById('myFrame');
var iframeDocument = myFrame.contentDocument || myFrame.contentWindow.document;

这样获取就会报这个错误：“Uncaught DOMException: Blocked a frame with origin "https://www.xxxxxxx.com" from accessing a cross-origin frame.”

好家伙，这不就是跨域了么。

我正准备给他方案呢，突然意识到他那个 iframe 完全是外部的，眉头一皱，发现不简单。

思考半天未果，决定直接问学长，这个咋做

学长的评价是：“做不了一点。”

然后这件事情就结束了，我和那个哥们明说做不了。

然后我们再来聊聊如果 iframe 是内部我们自己做的，我们怎么处理。

其实我们刚才的需求就是：”外部获取 iframe 内部的元素/数据嘛“

那么自然就有对跨域的处理办法了

postMessage

使用 postMessage 方法进行跨域交互。postMessage 是 HTML5 新增的一个 API，允许在跨源情况下安全地向宿主窗口传递消息。

例如，在父页面中使用以下代码向子页面传递消息：


var childWindow = document.getElementById("child-frame").contentWindow;
childWindow.postMessage("hello", "*");
var childWindow = document.getElementById("child-frame").contentWindow;
childWindow.postMessage("hello", "*");
var childWindow = document.getElementById("child-frame").contentWindow;
childWindow.postMessage("hello", "*");

在子页面中，可以使用以下代码监听到消息：


window.addEventListener("message", function(event) {
  if (event.origin !== "https://www.example.com") return;
  console.log("Received message: ", event.data);
});
window.addEventListener("message", function(event) {
  if (event.origin !== "https://www.example.com") return;
  console.log("Received message: ", event.data);
});
window.addEventListener("message", function(event) {
  if (event.origin !== "https://www.example.com") return;
  console.log("Received message: ", event.data);
});

CORS

在服务器端进行跨域资源共享（CORS）设置。CORS 是 W3C 标准，允许在浏览器中实现跨源资源共享。如果在服务器端配置了 CORS，就可以规避浏览器的同源策略限制。

例如，可以在服务器端添加如下代码：


Access-Control-Allow-Origin: https://www.example.com
Access-Control-Allow-Origin: https://www.example.com
Access-Control-Allow-Origin: https://www.example.com

这将允许来自 www.example.com 的页面访问服务器端的 API。在客户端使用 XMLHttpRequest 时，在请求中设置如下代码：


var xhr = new XMLHttpRequest();
xhr.open("GET", "https://www.example.com/api/data");
xhr.setRequestHeader("Origin", "https://www.example.com");
xhr.send();
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://www.example.com/api/data");
xhr.setRequestHeader("Origin", "https://www.example.com");
xhr.send();
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://www.example.com/api/data");
xhr.setRequestHeader("Origin", "https://www.example.com");
xhr.send();