如何从 iframe 中操作父窗口的重定向？

在从一个 iframe 内部操作其父窗口的重定向时，主要是通过 JavaScript 的 window.parent 或 window.top 对象来实现的。window.parent 指向当前窗口的直接父级窗口，而 window.top 指向最顶层的父级窗口（在窗口嵌套的情况下）。这意味着如果你的 iframe 嵌套层数只有一层，window.parent 和 window.top 实际上是指向同一个对象。

以下是一个简单的例子，说明如何从 iframe 内部重定向其父窗口到另一个 URL：

html
<!-- 父窗口HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父窗口页面</title>
</head>
<body>
<iframe src="iframe.html" width="300" height="200"></iframe>
</body>
</html>

html
<!-- iframe.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Iframe 页面</title>
<script>
  function redirectParent() {
    // 从 iframe 中重定向父窗口
    window.parent.location.href = 'https://www.example.com';
  }
</script>
</head>
<body>
<button onclick="redirectParent()">重定向父窗口</button>
</body>
</html>

在这个例子中，当在 iframe 中点击按钮时，调用 redirectParent 函数，它设置父窗口的 location.href 到指定的 URL，从而引发重定向。

需要注意的是，由于浏览器同源策略的限制，如果 iframe 和父窗口不是同源的（即协议、域名和端口号都相同），JavaScript 将无法访问父窗口的属性。在这种情况下，你可能需要使用一些其他的技术，比如通过 postMessage 方法进行跨域通信。

2024年6月29日 12:07 回复

1个答案

你的答案