Question

我正在使用HTML / CSS和JavaScript编写网站。我在同一个文件夹中有两个html页面，我在两个窗口中打开它们。我想让他们沟通。作为一个例子，当我点击第一页上的按钮时，它应该激活第二页上的一个功能。喜欢移动div或类似的东西。

这里的例子是带有JavaScript的第一个html文件：

function function() {

    document.getElementById('box').style.marginLeft = 5 + "%";
}

<!DOCTYPE html>
<html>
    <head>
    	<script src="index.js"></script>
	</head>

	<body>
		<button onclick="function()">Click here</button>
	</body>
</html>

这里是CSS的第二个html文件：

#box {
  background-color: blue;
  height: 50px;
  width: 50px;
  margin-left: 1$;
  transition: 1s;
}

<!DOCTYPE html>
<html>
    <head>
    	<script src="index.js"></script>
	</head>

	<body>
		<div id="box"></div>
	</body>
</html>

当我点击第一个html文件上的按钮时，它应该移动第二个html页面上的div。他们可以使用相同的JavaScript。但是我怎么能这样做呢？

Answer 1

你不能只用JavaScript做到这一点。重点是：JS是一种客户端语言，这意味着它由客户端（浏览器）下载并由它（而不是服务器）运行。对于2页进行通信，您可以通过某种媒介以某种方式建立通信。媒介可以是：

网络本身。 2个客户可以直接沟通，但前提是他们彼此了解情况。地址。他们怎么会得到那些？在服务器的帮助下（这将我们带到下面的第二个选项）或通过手动配置这是非常不切实际的
您的服务器。好的，这是最常用的方法，但不仅仅涉及JS：这需要服务器端语言（PHP，Python，C ++，Java，等等）
您的浏览器。在这种特殊情况下，您可以建立这样的沟通：如果您以特殊方式在第一页的同一浏览器中打开第二页，那么第二页就是“＃34;在控制之下”＃34;第一个，你可以＆＃34;命令＆＃34;第二个从第一个做一些事情

因此，如果您对第三个选项感兴趣，请阅读window.open，window.opener，window.parent。

var newWindow = window.open(url, name, params);

将打开一个新窗口（比如你的第二页）并为你带来一个变量newWindow，它是对打开窗口的window对象的引用。试试例子

newWindow.write("haha, I'm controlling this stuff!");

同样，在第二个窗口中，您可以使用

var oldWindow = window.opener;

您还可以使用多种方法（window``.close，.moveBy，.moveTo，.resizeBy，.resizeTo等等。

但请注意，此次互动仅限于您的浏览器：如果您将某些内容更改为，则会在浏览器中显示（例如在页面中添加一些文字），这样就不会受到影响影响存储在服务器上的实际页面，因为这需要服务器通过某些服务器端脚本执行某些操作。

PS推进此技术，您可能希望阅读window.postMessage，但这主要是为跨域网页之间的通信而设计的。

Answer 2

尝试使用 cookie。这是我能想到的最简单的方法。这个网站看起来很有帮助：https://www.w3schools.com/js/js_cookies.asp

如何通过JavaScript在两个html页面之间进行通信？

2 个答案: