是否可以在一个文档中使用 JavaScript 来更改另一个文档中的 HTML？答案

【问题标题】：Is it possible to use JavaScript in one document to change HTML in another?是否可以在一个文档中使用 JavaScript 来更改另一个文档中的 HTML？
【发布时间】：2011-09-21 01:42:41
【问题描述】：

例如：

function change() { document.getElementById('identification').href = "http://www.stackoverflow.com"; }

相关的 HTML（重要部分）

<a href="#" id="identification">Stack Overflow</a> <input type=button value="Change" onclick="change()" />

这会将我标记中的 href 更改为 http://www.stackoverflow.com，但是说我想从不同的 HTML 文件中执行此操作？ JavaScript 将在另一个文件的标签中，但会编辑第一个文件的内容。这可能吗？如果有，怎么做？

【问题讨论】：

请记住，我在 JavaScript 方面的经验非常有限......
您要导入另一个文件并替换部分页面内容？
很抱歉，但我认为这是不可能的。如果可能的话，这将是一个完整的安全问题。 JavaScript 仅适用于一页。您必须使用服务器端语言，因为 JavaScript 是客户端，这意味着它不能转到另一个页面并对其进行操作。
我很确定每周至少会以各种不同的形式询问这个问题。
stackoverflow.com/questions/3950620/…

标签： javascript html

【解决方案1】：

Javascript 只存在于特定页面的生命周期中，因此您不能让一个文件中的代码修改另一个尚未加载的文件。

根据您想要的用户体验，有一些选项：

在第一页上，使用一些 javascript 设置一个 cookie，然后在第二个页面加载时，读取该 cookie 并让第二个页面中的 javascript 根据 cookie 值进行调整。 Cookie 可以在同一域的页面之间共享。
在第一页上，使用一些 javascript 创建一个查询参数（URL 中 ? 后面的那些东西，看起来像这样 ?show=true。当您加载第二页时，通过附加 ?show=true 来请求该页面（或任何你编的）到 URL 的末尾。当第二个页面加载时，它可以检查它的 URL 上的查询参数并决定如何修改自己。这是从一个页面传递临时参数到下一页。
将第二个页面加载到 iframe 中（嵌入到第一个页面中），当它加载时，您的 javascript 可以修改它（如果它与您的主页来自同一个域）。
将第二个页面加载到您的第一个页面中，实际上将其插入到原始页面中，或者附加它或替换您现有的一些内容。然后，第一页的 javascript 可以在第二页插入后修改 HTML。
打开一个包含新页面的新窗口。如果它与您在同一个域中，那么您的 javascript 可以访问该新页面并对其进行修改。

注意：当两个页面不具有相同的来源（例如，相同的域）时，浏览器会尝试阻止页面修改。请参阅same origin policy 的描述。因此，如果您的问题涉及不同域的页面，那么您将需要找到一种不同的方法来解决您的问题。插件之类的东西有时可以绕过同源策略，但出于多种安全原因，常规页面 javascript 却不能。

【讨论】：

请注意，只有当您有权访问 cookie（例如共享域）时，#1 才会起作用
您忘记使用window.open 打开（同域的）新窗口。尽管它经常用于创建弹出窗口，但 window.open 也有合法用途。
很好的 cmets Jason 和 zzzzBov。我已经将它们都合并了。

【解决方案2】：

因为我找不到一个我认为与此匹配的问题足以作为一个 exact 副本关闭，所以我将发布一个答案：

是否可以在一个文档中使用 JavaScript 来更改另一个文档中的 HTML？

是的，假设两个窗口都在同一个安全沙箱中。

如果有，怎么做？

很简单，你需要从你想访问的window的上下文中调用DOM函数。

获取新窗口对象的简单方法是调用window.open

var newWin = window.open(newpage)

newWin 是一个window 对象，因此有一个document 对象以及它可能已加载的所有其他DOM 元素。就像任何其他窗口一样，如果您尝试与页面上加载的元素进行交互，则需要等待 document.ready 或 window.onload。

newWin.onload = function(){
  var ident = newWin.document.getElementById('identification');
  ident.href = 'http://stackoverflow.com';
};

【讨论】：