'document.getElementById' 仅适用于 index.html

Question

最终目标是循环浏览博客页面上的照片。似乎 'document.getElementById().src' 是个好方法。

问题： 为了确保 javascript 代码成功链接到博客页面，我尝试在我的 script.js 文件中使用它进行测试：

document.getElementById('testID').innerHTML = "Running test";

这在我的 .html 文件中：

<div id="testID"></div>

但是，文本 "Running Test" 没有显示在博客页面上。但是，当运行在我的 index.html 页面中进行完全相同的测试时，它确实有效。两个 .html 文件与 jQuery 一起加载相同的脚本文件。我不明白为什么它在一个 html 文件中有效，而在另一个文件中无效。

新发现： 当我从内部删除这行代码时，它现在可以在博客页面上运行

$(document).ready(function(){ ... });

为什么会这样？

Answer 1

当前页面中的 Javascript 只能访问当前加载到浏览器中的页面中的 HTML 元素。

更具体地说，document.getElementById() 仅在当前网页的文档中搜索匹配元素。它不会搜索任何其他页面，当然也不会搜索您服务器上未加载到浏览器中的其他文件。 "current web page"表示浏览器栏中从当前URL加载的HTML。

当一个网页在浏览器中不再可见时 window（例如，它已被其他页面替换），它就消失了，任何人都无法访问 Javascript。在某些特定情况下，您可以访问加载到其他选项卡或其他框架中的文档（遵守同源安全规则并需要不同的访问方法）。

此外，对网页的更改不会在浏览器中持久存在。一旦网页不再加载到活动浏览器 window，它就会消失，再次重新加载将加载该文档的原始、未修改版本。

如果您希望一个页面中的相同代码到另一页中的运行，则您必须在另一页中包含相同的代码。您可以想要共享对代码的引用，方法是将代码放入其自己的页面，然后在每个页面中使用 <script src="xxx.js"> 标记以使相同的代码加载到每个页面中。

Answer 2

如果正确解释问题，请尝试使用 .load()

$("#container").load("/blog/blog_1.html #testID")

'document.getElementById' only works on index.html