javascript getElementById 在 <embed> 的 Google Chrome 扩展程序中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5230095/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
getElementById not working in Google Chrome extension for <embed>
提问by mark
In my Google Chrome extension content script I have the following:
在我的 Google Chrome 扩展内容脚本中，我有以下内容：
jQuery(document).ready(function() {
var player = document.getElementById('player');
console.log(player);
console.log(document);
});
I'm running it on any Hulu video, which has the following embed with id='player'
我在任何 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&user_id=-1&startLoadWrapperTime=1299572732904&overrideBrand=&referrer=http://www.hulu.com/watch/20338/saturday-night-live-steve-carell-monologue#continuous_play=on&continuous_play_on=true&sortBy=&initMode=4&modes=4&content_id=7751491&cb=2011-3-8-8&v=3">
For example, the following link http://www.hulu.com/watch/20337/saturday-night-live-snl-digital-short-the-japanese-office
比如下面这个链接http://www.hulu.com/watch/20337/saturday-night-live-snl-digital-short-the-japanese-office
But when the script is run, console.log(player) returns null. However, console.log(document) returns the proper document object.
Even if I try var player = Document.prototype.getElementById.apply(document, ['player']);I still get null.
但是当脚本运行时，console.log(player) 返回 null。但是，console.log(document) 返回正确的文档对象。即使我尝试var player = Document.prototype.getElementById.apply(document, ['player']);我仍然得到空值。
The funny thing is, if I try it from the Chrome JavaScript Console, it works fine, I get the proper <embed>printed to console.
有趣的是，如果我从 Chrome JavaScript 控制台尝试它，它工作正常，我得到正确的<embed>打印到控制台。
Any ideas why this isn't working in my content script?
任何想法为什么这在我的内容脚本中不起作用？
UPDATE: As requested, here are the complete contents of my chrome extension folder:
更新：根据要求，以下是我的 chrome 扩展文件夹的完整内容：
manifest.json:
清单.json：
{
"name": "gebidtest",
"version": "1",
"permissions": [
"http://*/*",
"https://*/*"
],
"content_scripts": [{
"matches": ["http://*/*"],
"js": ["jquery-1.5.1.min.js","app.js"]
}]
}
app.js:
应用程序.js：
jQuery(document).ready( function() {
var player = document.getElementById('player');
console.log(player);
console.log(document);
});
jquery-1.5.1.min.js: I just downloaded it
jquery-1.5.1.min.js：我刚下载
I'm using Chrome version 10.0.648.127on a Mac, but I also tried it on a PC with the same results
我在Chrome version 10.0.648.127Mac 上使用，但我也在 PC 上尝试过，结果相同
回答by iericzhou
Direct executing DOM related operation in JS is not correct. For example:
在JS中直接执行DOM相关操作是不正确的。例如：
default.html
默认.html
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="default.js"></script>
</head>
<body>
<a id="Bar" href="#"></a>
</body>
</html>
default.js
默认.js
const bar = document.getElementById("Bar");
alert(bar.id);
At this time the DOM content may not be completely loaded yet, and that is why the "bar" may be "NULL".
此时DOM内容可能还没有完全加载，这就是“bar”可能为“NULL”的原因。
The correct way to do this is:
正确的做法是：
default.js
默认.js
document.addEventListener('DOMContentLoaded', function() {
const bar = document.getElementById("Bar");
alert(bar.id);
});
That is: executing the DOM related operation when the DOMContentLoaded event happens.
即：在DOMContentLoaded事件发生时执行DOM相关操作。
"setTimeout" is not the right way because you cannot make sure the DOM content is completely loaded by setting some time delay!
“setTimeout” 不是正确的方法，因为您无法通过设置一些时间延迟来确保 DOM 内容完全加载！
回答by mark
Turns out the problem was with timing. Even though it was inside a jQuery(document).ready(), the getElementById failed because the embed wasn't loaded yet. When I do a setTimeout of a few seconds, the getElementById works.
原来问题出在时间上。即使它在 jQuery(document).ready() 中，getElementById 也失败了，因为还没有加载嵌入。当我执行几秒钟的 setTimeout 时，getElementById 起作用。
回答by Nikole
Use defer.
使用延迟。
<script defer>...</script>
回答by Martin Jespersen
Works fine for me in chrome 9.
在 chrome 9 中对我来说很好用。
Try this fiddle: http://jsfiddle.net/Ee7mq/
试试这个小提琴：http: //jsfiddle.net/Ee7mq/
If the console doesn't show the player tag something is wrong with your browser. If it does, something is wrong with your code. To figure out what i'd need to see more of it.
如果控制台未显示播放器标签，则您的浏览器有问题。如果是这样，则您的代码有问题。为了弄清楚我需要看到更多。
