从子页面获取父页面的 URL - iframe-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常会使用 iframe 元素来嵌入其他网页或应用程序。但是，当需要在 iframe 内部执行某些操作时，通常需要访问包含 iframe 的父级页面（也称为宿主页面）的属性或方法。本文将介绍如何在子页面中获取父页面的 URL。

获取父页面的 URL

我们可以通过 JavaScript 中的 window.parent.location.href 属性来获取父页面的 URL。在子页面中，可以使用以下代码来获取父页面的 URL：

const parentUrl = window.parent.location.href;
console.log(parentUrl);

此代码将输出包含 iframe 的父级页面的 URL。但是，在跨域情况下，由于浏览器的安全策略，无法直接访问父窗口对象，因此会出现“拒绝访问”错误。

处理跨域问题

有一种方法可以解决跨域问题，即使用 postMessage() 方法从子页面向父页面发送消息。在父页面中，我们可以监听 message 事件并从中提取所需的信息。以下是一个示例：

子页面代码：

const parentUrl = window.parent.location.href;
window.parent.postMessage(parentUrl, '*');

以上代码将使用 postMessage() 方法将父页面的 URL 发送到父页面。

父页面代码：

window.addEventListener('message', function(event) {
  if (event.origin !== 'http://example.com') return;

  const parentUrl = event.data;
  console.log(parentUrl);
});

在上述代码中，我们监听 message 事件并检查事件的来源是否是我们信任的域。然后，我们从事件数据中提取父页面的 URL 并输出到控制台。

指导意义

通过本文，我们了解了如何从子页面获取父页面的 URL，并解决了跨域问题。在实际开发中，我们需要明确安全策略，防止恶意代码利用 iframe 窃取用户信息或执行其他攻击。同时，我们要学会使用合适的方法来在子页面和父页面之间进行通信，以实现更好的用户体验。

示例代码

以下是完整示例代码：

index.html：

-- -------------------- ---- -------
--------- -----
------
------
  ------------- ------------
-------
------
  ---------- ---------
  ------- --------------------------

  --------
    ---------------------------------- --------------- -
      -- ------------- --- --------------------- -------

      ----- --------- - -----------
      --------------------- ------ ------ -----------
    ---
  ---------
-------
-------

child.html：

-- -------------------- ---- -------
--------- -----
------
------
  ------------ ------------
-------
------
  --------- ---------

  --------
    ----- --------- - ----------------------------
    ------------------------------------ -----
  ---------
-------
-------

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/28856