[英]Javascript - onload event
I am having a problem with onload
event when I am opening new tabs without switching to them. 打开新标签页而不切换到它们时,
onload
事件出现了问题。
I am trying to write a user script for Chrome that adds "Copy" buttons after pre
tags. 我正在尝试为Chrome编写一个用户脚本,该脚本在
pre
标记后添加“复制”按钮。 It works fine when the page I am trying to load is on focus but when I open a new tab in the background, it isn't working. 当我尝试加载的页面处于焦点上时,它工作正常,但是当我在后台打开新标签页时,它无法正常工作。
Is this behaviour expected? 这是预期的行为吗?
Here's my code: 这是我的代码:
// ==UserScript==
// @author Vamsi Krishna | vamsi_ism@outlook.com
// @description Adds a copy button after 'pre' tags.
// @grant none
// @homepage https://github.com/krikx/CopyCode
// @match *://*/*
// @name CopyCode
// @version 0.1
// ==/UserScript==
var css = "/* google fonts */ @import url(https://fonts.googleapis.com/css?family=Open+Sans); .kxbt { border-radius: 4px; cursor: pointer; display: inline-block; font-family: 'Open Sans', 'sans-serif'; font-size: 15px; margin-bottom: 5px; padding: 5px; padding-top: 3px; transition: .2s; } .blue { color: #55acee; border: 1px #55acee solid; } .blue:hover { background-color: #55acee; color: #fff; } .green { color: #2ecc71; border: 1px #2ecc71 solid; } .green:hover { color: #fff; background-color: #2ecc71; } .red { color: #e74c3c; border: 1px #e74c3c solid; } .red:hover { color: #fff; background-color: #e74c3c; } /* green and red are almost never used as timeout is too fast to observe any noticible difference */";
var style = document.createElement('style');
style.innerHTML = css;
document.getElementsByTagName('head')[0].appendChild(style);
function Init(){
var blocks = document.getElementsByTagName('pre');
for (var id = 0; id < blocks.length; id++){
var btn = document.createElement('div');
btn.innerText = 'Copy';
btn.setAttribute('class', 'kxbt blue');
InsertAfter(blocks[id], btn);
}
}
function InsertAfter(refNode, newNode){
refNode.parentNode.insertBefore(newNode, refNode.nextSibling);
WireClick(newNode, refNode); // add the click funtionality
}
function WireClick(btn, block){
btn.addEventListener('click', function(){
Copy(btn, block);
});
}
function Copy(btn, block){
var range = document.createRange();
range.selectNode(block);
var sel = getSelection();
sel.removeAllRanges(); // TODO | removing selection without backup
sel.addRange(range);
var success = document.execCommand('copy');
sel.removeAllRanges(); // possible TODO
var msg = success ? 'Copied!' : 'Error!';
var tcls = success ? 'kxbt green' : 'kxbt red';
btn.innerText = msg;
btn.setAttribute('class', tcls);
setTimeout( // revert back to blue in 256ms
function(btn){
btn.innerText = 'Copy';
btn.setAttribute('class', 'kxbt blue');
},
256, btn
)
}
function main(){
var body = document.getElementsByTagName('body')[0];
// do not inject twice
if (body.hasAttribute('data-kxbt-inited')){
return;
}
body.setAttribute('data-kxbt-inited', true);
Init();
}
// wait until ready
window.addEventListener('load', main);
Adblock Plus probably was the cause of issue. Adblock Plus可能是问题的原因。
It is working properly after disabling and re-enabling ABP. 禁用并重新启用ABP后,它可以正常工作。
As I still don't know the cause of issue or why (apparently) disabling/re-enabling ABP solved the issue, it'd be great if anyone can help. 由于我仍然不知道问题的原因,也不知道为什么(显然)禁用/重新启用ABP解决了该问题,如果有人可以提供帮助,那就太好了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.