在前端开发过程中，我们经常需要在一个网页中嵌套另外一个网页。这时候，我们可以使用 HTML 的 iframe 标签来实现。但是，由于安全原因，不同域之间的 iframe 访问会受到限制。本文将介绍如何使用 JavaScript 在 iframe 中实现跨域 URL 访问。
跨域访问的问题
假设我们有一个页面 A，其中嵌套了一个来自不同域名下的页面 B，如下所示：
-- -------------------- ---- -------
---- -- - ---
--------- -----
------
------
----------- ---------
-------
------
-------- ------
------- -----------------------------------------
-------
-------当我们运行上述代码时，浏览器会尝试加载 http://example.com/page-b 这个页面。然而，由于浏览器的同源策略限制，页面 A 的 JavaScript 代码无法直接操作页面 B 中的内容。例如，我们不能使用以下代码获取页面 B 中的标题：
const iframe = document.querySelector('iframe');
const title = iframe.contentDocument.title;
console.log(title); // 输出空字符串这是因为页面 A 和页面 B 来自不同的域名，浏览器认为它们之间可能存在安全隐患，因此阻止了跨域访问。
使用 postMessage 实现跨域访问
为了解决上述问题，我们可以使用 JavaScript 的 postMessage 方法来实现跨域通信。postMessage 方法允许在不同窗口之间传递消息，并且不受同源策略的限制。我们可以在页面 A 中，向页面 B 发送一条消息，然后在页面 B 中监听该消息并进行相应的处理。
具体实现方式如下：
在页面 A 中发送消息
const iframe = document.querySelector('iframe');
// 向 iframe 发送消息
iframe.contentWindow.postMessage('hello from page A', 'http://example.com');以上代码中，我们使用 postMessage 方法向 http://example.com 发送了一条消息。第一个参数是要发送的消息内容，第二个参数是消息的目标窗口。由于我们要访问的是来自 http://example.com 域名的页面，因此必须将目标窗口设置为该域名。如果目标窗口是当前窗口的父窗口，则可以使用 parent 关键字。
在页面 B 中接收消息
// 监听消息事件
window.addEventListener('message', event => {
if (event.origin !== 'http://example.com') {
return; // 必须验证消息来源
}
console.log(event.data); // 输出 "hello from page A"
});以上代码中，我们使用 addEventListener 方法监听了 message 事件，并在回调函数中进行相应的处理。由于 postMessage 方法可以向任何窗口发送消息，为了防止恶意攻击，我们必须验证消息来源是否合法。在本例中，我们只接受来自 http://example.com 域名的消息。
示例代码
下面是一个完整的示例代码，演示如何在 iframe 中实现跨域 URL 访问：
-- -------------------- ---- -------
---- -- - ---
--------- -----
------
------
----------- ---------
-------
------
-------- ------
------- -----------------------------------------
--------
----- ------ - ---------------------------------
-- - ------ ----
--------------------------------------- ---- ---- --- ----------------------
---------
-------
-------<!-- 页面 B --> <!DOCTYPE html> <html> > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/30065) ，转载请注明来源 [https://www.javascriptcn.com/post/30065](https://www.javascriptcn.com/post/30065)