使用 JavaScript 从另一个页面修改页面的 HTML 值答案

【问题标题】：Modify HTML value of a page from another page with JavaScript使用 JavaScript 从另一个页面修改页面的 HTML 值
【发布时间】：2019-01-31 13:47:18
【问题描述】：

考虑一个名为page1.html 的HTML 页面，其结构简单如下：

<html>
<title>Page1</title>
<body>
  <h1>Hello</h1>
</body>
</html>

是否可以使用 JavaScript 从page2.html 更改page1.html 上的<h1> 文本？

如果可能，如何实现？

【问题讨论】：

你显示page2.html吗？
如果更改是持久的（即像编辑维基百科一样，在您对page2.html 执行操作之后，page1.html 上的h1 将被设置为所有加载页面的新值在那之后），或者它是否需要是动态的并且只对当前打开页面的人（例如 Facebook 聊天，您向一个用户发送消息，然后它出现在另一个用户的屏幕上）？跨度>
其实我没有为page2.html提供任何代码，但我很好奇，这个问题是否可行？那么如何实现呢？
我不想使更改持久化，而只是更改当前负载所需的值。
你到底想在这里实现什么？

标签： javascript html ecmascript-6

【解决方案1】：

既然你评论说你不需要它是持久的，你想要的是创造一个错觉，你正在用 JavaScript 从 page2.html 更改 page1.html 上的 <h1> 文本。

你需要两件事：

首先，要更改<h1> 中的实际文本，请使用.innerText 属性和replace() 方法。
要将地址栏中的 URL 从 /page2.html 更改为 /page1.html，请使用 History API 与 history.pushState() 和 history.replaceState() 方法。

【讨论】：

顺便说一句，我仍然不完全确定您真正想要实现的目标。
我可以在page2.html中执行数字1吗？
既然page2.html是虚拟的，那么答案是肯定的。
实际上，我有一个警报系统，它在网页中生成警报，而我无法访问程序的源代码，但我想通过在另一个页面上编写脚本来确认这些警报，所以确认过程可以由我的脚本自动完成。
如果我理解正确的话，你想要的是做不到的。

【解决方案2】：

我认为您正在寻找的简短答案是“否”。

如果没有服务器，您不能使用另一个静态页面修改一个静态页面。

其他朋友提到的一些解决方案可以工作，例如使用本地存储或填充 cookie - 仅当它们将在同一个浏览器上运行时 - 但它肯定需要在 page1.html 中进行一些更改，这不是你的'重新寻找。

【讨论】：

【解决方案3】：

假设您从同一来源为您的HTMLS 提供服务（例如，如果您打开了两个 facebook 选项卡），您可以使用 'storage' event 解决此问题（本地存储在选项卡之间共享），如下所示：

HTML1：

<script>
    localStorage.setItem('message', JSON.stringify({ 'myContent': 'i like pizza' }));`
     localStorage.removeItem('message');
</script>

HTML2

<script>
    $(window).on('storage', e => {
        var message = JSON.parse(e.originalEvent.newValue);
        $('#myH1').text(message.myContent);
    });
</script>

【讨论】：

storage 和 event 怎么样？
感谢 iuliu.net 的回答，但正如我所说，我不打算在 page1.html 中进行任何修改
是的。使用此示例，更改将不会被持久化，它们只会在当前加载时存在。（不要被这里的localStorage骗了，它只是两个页面之间的一种通信机制）