gpt4 book ai didi

javascript - getElementById 无法在 的 Google Chrome 扩展中工作

转载 作者:行者123 更新时间:2023-11-28 11:27:55 24 4
gpt4 key购买 nike

在我的 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']);我仍然得到 null。

有趣的是,如果我从 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:我刚刚下载了

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

最佳答案

直接在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 内容完全加载!

关于javascript - getElementById 无法在 <embed> 的 Google Chrome 扩展中工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5230095/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com