Question

我有一个HTML页面，其中包含一个显示“Open Popup”的按钮。单击此按钮后，将打开一个弹出窗口（使用window.open）。

新的弹出窗口是一个HTML页面，其中包含一个简单的输入字段和一个提交按钮。单击提交按钮后，弹出窗口应关闭，刚输入字段中输入的文本现在应显示在父窗口中。

我尝试使用opener.document.getElementById进行操作。它在Firefox中完美运行，但在Chrome中无法运行。

这是我父页面的代码（parent.html）：

<!DOCTYPE html>
<html>
<body>

<button type="button" onclick="openPopup()">Open Popup</button>

<p id="result"></p>

<script type="text/javascript">
function openPopup() {
	var popupWindow = window.open('popup.html', '', 'width=300, height=200');
}
</script>

</body>
</html>

这是我的弹出窗口代码（popup.html）：

<!DOCTYPE html>
<html>
<body>

<input type="text" id="userText" placeholder="Please enter some text">

<button type="button" onclick="submitText()">Submit!</button>

<script type="text/javascript">
function submitText() {
	opener.document.getElementById('result').innerHTML = 'The text you\'ve entered is: ' + document.getElementById('userText').value;
	self.close();
}
</script>

</body>
</html>

注意：父文件和弹出文件都位于我的桌面上。

如前所述，它适用于Firefox，但不适用于Chrome。当我点击“提交！” Chrome中的按钮，没有任何反应，并且控制台中显示以下错误：

Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.

我花了好几个小时试图在线寻求帮助，但我仍然无法让Chrome将数据从弹出窗口传递到父页面（如上所述，这两个位于我的桌面，即位于同一目录中）。

提前致谢。

Answer 1

您遇到的是Chrome的一项安全功能，该功能正在应用名为 CORS (Cross-Origin Request Specification) 的网络安全标准。这是为了防止一个网站访问另一个网站（因为这是尝试和诱骗人们放弃个人信息的常用技术），除非这两个网页都来自同一个域。例如，http://domainA.com默认情况下不能与http://domainB.com通信。在这种情况下，这是合法的需求，需要服务器配置才能允许它。

由于您是从桌面运行测试（没有网络服务器），因此不存在域信息，Chrome认为您正在制作跨域请求。

如果您从网络服务器（通过http或https）运行文件，它将起作用。

您可以在本地计算机上设置许多免费的Web服务器，许多开发工具都包含自己的Web服务器。例如， VS code 和 Visual Studio 都是免费的，并且包含了网络服务器。

JavaScript - 如何将输入值从弹出窗口传递到Chrome中的父窗口？

1 个答案: