getElementById 在 <embed> 的 Google Chrome 扩展中不起作用答案

【问题标题】：getElementById not working in Google Chrome extension for <embed>getElementById 在 <embed> 的 Google Chrome 扩展中不起作用
【发布时间】：2011-07-10 22:44:52
【问题描述】：

在我的 Google Chrome 扩展内容脚本中，我有以下内容：

jQuery(document).ready(function() {
    var player = document.getElementById('player');
    console.log(player);
    console.log(document);
});

我在任何 Hulu 视频上运行它，其中嵌入了以下 id='player'

<embed id="player" type="application/x-shockwave-flash" src="/site-player/playerwrapper.swf?cb=e80c477cL" width="100%" height="428" style="z-index:10;" name="player" quality="high" allowscriptaccess="always" allowfullscreen="true" bgcolor="#000000" flashvars="bitrate=700000&amp;user_id=-1&amp;startLoadWrapperTime=1299572732904&amp;overrideBrand=&amp;referrer=http://www.hulu.com/watch/20338/saturday-night-live-steve-carell-monologue#continuous_play=on&amp;continuous_play_on=true&amp;sortBy=&amp;initMode=4&amp;modes=4&amp;content_id=7751491&amp;cb=2011-3-8-8&amp;v=3">

例如以下链接http://www.hulu.com/watch/20337/saturday-night-live-snl-digital-short-the-japanese-office

但是当脚本运行时，console.log(player) 返回 null。但是，console.log(document) 返回正确的文档对象。即使我尝试var player = Document.prototype.getElementById.apply(document, ['player']); 我仍然为空。

有趣的是，如果我从 Chrome JavaScript 控制台尝试它，它工作正常，我得到正确的 <embed> 打印到控制台。

任何想法为什么这在我的内容脚本中不起作用？

更新：根据要求，这是我的 chrome 扩展文件夹的完整内容：

manifest.json：

{
    "name": "gebidtest",
    "version": "1",
    "permissions": [
      "http://*/*",
      "https://*/*"
    ],
    "content_scripts": [{
      "matches": ["http://*/*"],
      "js": ["jquery-1.5.1.min.js","app.js"]
    }]
}

app.js：

jQuery(document).ready( function() {
    var player = document.getElementById('player');
    console.log(player);
    console.log(document);
});

jquery-1.5.1.min.js：我刚下载了

我在 Mac 上使用 Chrome version 10.0.648.127，但我也在 PC 上尝试过，结果相同

【问题讨论】：

标签： javascript flash google-chrome-extension embed getelementbyid

【解决方案1】：

在 chrome 9 中对我来说很好。

试试这个小提琴：http://jsfiddle.net/Ee7mq/

如果控制台未显示播放器标签，则您的浏览器有问题。如果是这样，则说明您的代码有问题。为了弄清楚我需要看到更多内容。

【讨论】：

用我的扩展文件的完整转储更新了我的问题

【解决方案2】：

原来问题出在时间上。即使它在 jQuery(document).ready() 中，getElementById 也失败了，因为尚未加载嵌入。当我设置几秒钟的 setTimeout 时，getElementById 就起作用了。

【讨论】：

【解决方案3】：

在JS中直接执行DOM相关操作是不正确的。例如：

default.html

<!DOCTYPE HTML>
<html>
    <head>
    <script type="text/javascript" src="default.js"></script>
    </head>
    <body>
         <a id="Bar" href="#"></a>
    </body>
</html>

default.js

const bar = document.getElementById("Bar");
alert(bar.id);

此时DOM内容可能还没有完全加载，这就是为什么“bar”可能是“NULL”。

正确的做法是：

default.js

document.addEventListener('DOMContentLoaded', function() {
  const bar = document.getElementById("Bar");
  alert(bar.id);
  });

即：当DOMContentLoaded事件发生时，执行DOM相关操作。

“setTimeout”不是正确的方法，因为您无法通过设置一些时间延迟来确保 DOM 内容完全加载！

【讨论】：

【解决方案4】：

使用延迟。

<script defer>...</script>

【讨论】：

defer 属性仅适用于外部脚本（仅应在存在 src 属性时使用）。