选择<选项> < select>来自Chrome扩展内容脚本 [英] Selecting <option> of a <select> from a chrome extension content script
问题描述
我无法尝试从chrome内容脚本激活change（）事件。
我已经浏览了网站和谷歌的帖子，但仍然没有成功。
这里是我试图实现的描述 p>
请考虑以下网页（可通过 http：/ /www.gilzu.com/TFF/select.html 应该有人帮助）：
< ; html xmlns =http://www.w3.org/1999/xhtml>
< head>
< title>无标题页< /标题>
< script type =text / javascriptsrc =jquery.js>< / script>
< script type =text / javascript>
$（document）.ready（function（）{
$（'＃woot'）。die（'change'）;
$（'＃woot'）。live（'change '，function（）{
$（'＃description'）。text（jQuery（'＃woot'）。val（））;
}）;
console.log（window ）;
$ b $（＃meh）。click（function（）{
$（'＃woot'）。val（15）;
$（'＃woot'）。change（）;
}）;
$（'＃woot'）。val（21）;
$（'＃woot '）.change（）;
}）;
< / script>
< / head>
< body>
< p>
< select id =woot>
< option id =Option1value =15> a< / option>
< option id =Option2value =16> b< / option>
< option id =Option3value =17> c< / option>
< option id =Option4value =18> d< / option>
< option id =Option5value =19> e< / option>
< option id =Option6value =20> f< / option>
< option id =Option7value =21> g< / option>
< / select>
< / p>
< p id =description>< / p>
< p>< input type =buttonid =meh/>< / p>
< / body>
< / html>
什么工作：
1.启动时，change（）启动并更新选择框为21，并在div上显示正确的值。
2.按下按钮#meh，将选择框更改为15，触发change（）事件，在屏幕上显示正确的值。
目前没有意外。
所以我通过以下内容脚本前往内容脚本：
< $ c $> $（document）.ready（function（）{
$（'＃woot'）。val（17）;
$（'＃woot'）。change（）;
}）;
所以select标签更新，但change（）事件不会触发。
我已经阅读了关于chrome扩展隔离世界的论坛，并将此理论付诸实践：
$（＃meh）。click（）;
}）;
，它实际上触发了点击事件和选择框的变化事件！
也与另一篇文章相矛盾，声称js的代码注入有效：
$（document）.ready（function（）{
var x = $（< script type ='text / javascript'/>）;
$（x）.text（$ （'#woot'）。val（18）; $（'＃woot'）。change（）;）;
$（head）。append（x）;
}）;
发出相同的效果：选择框更新但更改事件不会触发。
我也尝试了以下内容：
1.创建一个按钮，例如带有触发选择标签更改（）的附加单击事件的示例#meh。只有选择更新，没有事件触发。
2.通过attr（），prop（），val（）更改选择框的值只有选择更新，没有事件触发。
3.通过change（）触发事件，触发（'change'）和selectedIndex仅选择更新，无事件触发。
4.通过js
延迟命令5.使用focus（）另一个控件，这个控件甚至blur（）选择框，因为有些帖子显示。
你的帮助将是最受赞赏的
我真的不知道JQuery，但是这里是如何做到没有JQuery和而不会在网页中注入任何内容....
var selections = document.querySelector（'＃woot'）;
selections.value = 17;
var evt = document.createEvent（HTMLEvents）;
evt.initEvent（change，true，true）;
selections.dispatchEvent（evt）;
I'm hoplessly trying to activate a change() event from a chrome content script. I've gone past through of the website and google posts, but still nothing works.
here's a description of what i'm tryin to achieve
consider the following webpage (reachable via http://www.gilzu.com/TFF/select.html should someone be so kind to help) :
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#woot').die('change');
$('#woot').live('change', function () {
$('#description').text(jQuery('#woot').val());
});
console.log("window ready");
$("#meh").click(function() {
$('#woot').val(15);
$('#woot').change();
});
$('#woot').val(21);
$('#woot').change();
});
</script>
</head>
<body>
<p>
<select id="woot">
<option id="Option1" value="15">a</option>
<option id="Option2" value="16">b</option>
<option id="Option3" value="17">c</option>
<option id="Option4" value="18">d</option>
<option id="Option5" value="19">e</option>
<option id="Option6" value="20">f</option>
<option id="Option7" value="21">g</option>
</select>
</p>
<p id="description"></p>
<p><input type="button" id="meh" /></p>
</body>
</html>
what DO work: 1. on startup the change() fires up and updates the selection box to 21 and shows right value on the div. 2. pressing on the button #meh, changes the selection box to 15, triggers the change() event that shows the right value on the screen.
no surprise so far.
so i'm heading to the content script via:
$(document).ready(function () {
$('#woot').val(17);
$('#woot').change();
});
so the select tag updates, but the change() event does not trigger.
I've read the forum about chrome's extension isolated worlds and put this theory to the test:
$(document).ready( function() {
$("#meh").click();
});
and it infact triggers both the click event AND the change event of the select box!
also, to contradict another post claiming that code injection of the js works:
$(document).ready( function() {
var x = $("<script type='text/javascript' />");
$(x).text("$('#woot').val(18); $('#woot').change();");
$("head").append(x);
});
issues the same effect: select box updates but change event does not fire.
i've also tried the following: 1. creating a button such as the example's #meh with an attached click event that triggers the select tag's change(). only the select updates, no event fires. 2. changing the value of the select box via attr(), prop(), val() only the select updates, no event fires. 3. firing the event via change(), trigger('change') and selectedIndex only the select updates, no event fires. 4. delaying the command via js 5. using focus() another control, this control or even blur() the select box as some posts suggest.
your help will be most appreciated
I dont really know JQuery, but here's how to do it without JQuery and without injecting anything into the page....
var selections = document.querySelector('#woot');
selections.value = 17;
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", true, true);
selections.dispatchEvent(evt);
这篇关于选择<选项> < select>来自Chrome扩展内容脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
