为什么更改我的框的innerHTML会使我的按钮在Greasemonkey中停止工作
Why does changing the innerHTML, of my box, make my button stop working in Greasemonkey?
所以,我写了一个脚本,在一个新的选项卡中一次加载一个图像…多亏了Brock在这里,我有了一个停止按钮。。。
然后我打破了它,在柜台上加上我在等待这个问题的答案时写的。
我看不出有什么原因应该打破它…请帮帮我?
我的脚本:
var box = document.createElement ('div');
box.id = 'mySelectBox';
GM_addStyle (
' #mySelectBox { ' +
' background: white; ' +
' border: 2px solid red; ' +
' padding: 4px; ' +
//' position: absolute; ' +
' position: fixed; ' +
' top: 8px; left: 8px; ' +
' max-width: 400px; ' +
' } '
);
document.body.appendChild (box);
box.innerHTML = '';
var searchButton = document.createElement ('div');
searchButton.className = 'mySearchButton';
searchButton.textContent = 'Open';
GM_addStyle (
' .mySearchButton { ' +
' background: #aaa; ' +
' border: 1px solid #777; ' +
' padding: 1px; ' +
' margin-left: 8px; ' +
' float: right; ' +
' cursor: pointer; ' +
' } '
);
box.insertBefore (searchButton, box.nextSibling);
var stopButton = document.createElement ('div');
stopButton.className = 'myStopButton';
stopButton.textContent = 'Stop';
GM_addStyle (
' .myStopButton { ' +
' background: #aaa; ' +
' border: 1px solid #777; ' +
' padding: 1px; ' +
' margin-left: 8px; ' +
' float: right; ' +
' cursor: pointer; ' +
' } '
);
box.insertBefore (stopButton, box.nextSibling);
var closeButton = document.createElement ('div');
closeButton.className = 'myCloseButton';
closeButton.textContent = 'X';
GM_addStyle (
' .myCloseButton { ' +
' background: #aaa; ' +
' border: 1px solid #777; ' +
' padding: 1px; ' +
' margin-left: 8px; ' +
' float: right; ' +
' cursor: pointer; ' +
' } '
);
box.insertBefore (closeButton, box.firstChild);
closeButton.addEventListener ('click', function () {
box.parentNode.removeChild (box);
}, true);
var mytable = document.getElementById
('lair-sort-pets').getElementsByTagName ('img');
var linksToOpen = [];
var mywin2 = null;
var okayToOpenLinks = true;
searchButton.addEventListener ('click', openpics);
stopButton.addEventListener ('click', stopLinkSequence);
function openpics () {
okayToOpenLinks = true;
if (linksToOpen.length === 0) {
for (var J = 0, L = mytable.length; J < L; J++) {
linksToOpen.push (mytable[J].src); //-- Add URL to list
}
}
openLinksInSequence ();
};
original = box.innerHTML
function stopLinkSequence () {
okayToOpenLinks = false;
}
function openLinksInSequence () {
k = linksToOpen.length - 1
if (mywin2) {
mywin2.close ();
mywin2 = null;
}
if (okayToOpenLinks && linksToOpen.length) {
var link = linksToOpen.shift ();
mywin2 = window.open (link, "my_win2");
box.innerHTML = '<center>Links left</center><br>' + '<center>' + k + '</center><br>' + original;
mywin2.addEventListener ('load', openLinksInSequence, false);
}
}
如果我注释掉这行,它会再次工作(除了没有状态计数器):
box.innerHTML = '<center>Links left</center><br>'+'<center>'+k+'</center><br>'+original;
为什么?
这是Greasemonkey脚本的一个可能的目标页面。
当您使用innerHTML
(或outerHTML
)更改元素的内容时,它会破坏该元素所包含的任何内容的任何事件处理程序。它还可能导致性能问题和内存泄漏。不要在用户脚本中使用innerHTML
,除非初始创建全新节点。
对于倒计时/状态显示,创建一次HTML,然后只更改数据内容和/或使用CSS更改显示。这样做,再稍微清理一下,代码就变成了:
var box = document.createElement ('div');
document.body.appendChild (box); // Must append before set outerHTML
box.outerHTML = multilineStr ( function () {/*!
<div id="mySelectBox">
<div id="myStatus">Links left<br>
<span>86</span>
</div>
<div id="myCloseButton">X</div>
<div id="mySearchButton">Open</div>
</div>
*/} );
document.getElementById ("myCloseButton").addEventListener ('click', function () {
var box = this.parentNode;
box.parentNode.removeChild (box);
} );
var startStopBtn = document.getElementById ("mySearchButton");
startStopBtn.addEventListener ('click', startStopPicsLoad);
var mytable = document.querySelectorAll ('#lair-sort-pets img');
var linksToOpen = [];
var mywin2 = null;
var okayToOpenLinks = true;
function startStopPicsLoad () {
if (typeof startStopPicsLoad.isStartBtn === "undefined") {
startStopPicsLoad.isStartBtn = true;
}
if (startStopPicsLoad.isStartBtn) {
//-- Change start button to stop button
startStopBtn.textContent = "Stop";
startStopPicsLoad.isStartBtn = false;
if (linksToOpen.length === 0) {
for (var J = 0, L = mytable.length; J < L; J++) {
linksToOpen.push (mytable[J].src); //-- Add URL to list
}
//-- Display the status area.
document.querySelector ('#myStatus').style.display = "block";
}
openLinksInSequence ();
}
else {
//-- Change stop button to start button
startStopBtn.textContent = "Open";
startStopPicsLoad.isStartBtn = true;
//-- Actually stop the sequence.
okayToOpenLinks = false;
}
};
function openLinksInSequence () {
if (mywin2) {
mywin2.close ();
mywin2 = null;
}
if (okayToOpenLinks) {
if (linksToOpen.length) {
var k = linksToOpen.length - 1;
var statDisp = document.querySelector ('#myStatus span');
statDisp.textContent = k;
var link = linksToOpen.shift ();
mywin2 = window.open (link, "my_win2");
mywin2.addEventListener ('load', openLinksInSequence, false);
}
}
else {
//-- Sequence is now stopped, reset the state variable.
okayToOpenLinks = true;
}
}
GM_addStyle ( multilineStr ( function () {/*!
#mySelectBox {
background: white;
border: 2px solid red;
padding: 4px;
//position: absolute;
position: fixed;
top: 8px; left: 8px;
max-width: 400px;
}
#myStatus {
text-align: center;
display: none;
}
#myCloseButton {
background: #aaa;
border: 1px solid #777;
padding: 1px;
margin-left: 8px;
float: right;
cursor: pointer;
}
#mySearchButton {
background: #aaa;
border: 1px solid #777;
padding: 1px;
margin-left: 8px;
float: right;
cursor: pointer;
}
*/} ) );
function multilineStr (dummyFunc) {
var str = dummyFunc.toString ();
str = str.replace (/^[^'/]+'/'*!?/, '') // Strip function() { /*!
.replace (/'s*'*'/'s*'}'s*$/, '') // Strip */ }
.replace (/'/'/.+$/gm, '') // Double-slash comments wreck CSS. Strip them.
;
return str;
}
相关文章:
- 是否有任何可能的原因使我应该指定类型=“”;按钮“;用于我的按钮元素
- 我的按钮坏了
- 为什么我的按钮组件提交它所在的表单
- 为什么我的按钮的 onClick() 方法没有用
- 为什么我的按钮正在将事件传播到其父项
- 为什么我的按钮会这样
- 角度js 我无法动态调用我的按钮
- 我的设置超时不会自动提交我的按钮
- 我的按钮中的函数不会重新加载另一个函数
- 为什么当我在 jQuery 中添加切换事件时我的按钮消失了
- 为什么我不能禁用我的按钮
- 为什么我的 JS 没有启用我的按钮
- 我无法让我的按钮响应函数
- 我的按钮的 jQuery 事件处理程序只工作一次
- 拨打Ajax电话,在我的按钮被MooTools点击后
- 为什么我的按钮没有将数据发布到我的 mysql 数据库
- 如何防止我的按钮点击 5 秒
- 单击后如何使我的按钮更改以执行不同的功能
- 为什么我的按钮不会隐藏?(JavaScript Functions/CSS Visibility)
- 我的按钮以前可以用,但现在不行了;t