检查脚本是否存在页面
问题描述:
我有一个我已经制作的书签,它从我的服务器上加载一个脚本到用户当前页面。不过,我有一个如果检查我的脚本,如果条件不满足,则不采取任何行动。但是,如果用户满足该条件,那么代码将运行,但已导致在其页面中插入两组脚本。我可以预防吗?检查脚本是否存在页面
<a href="javascript: (function() {
var jsCode = document.createElement('script');
jsCode.setAttribute('src', 'http://xxx.co.uk/xxx/script.js');
document.body.appendChild(jsCode);
}());">Bookmarklet</a>
答
您可以检查您的脚本是否加载这样的:
function isMyScriptLoaded(url) {
if (!url) url = "http://xxx.co.uk/xxx/script.js";
var scripts = document.getElementsByTagName('script');
for (var i = scripts.length; i--;) {
if (scripts[i].src == url) return true;
}
return false;
}
或者,你可以做这样的事情:
<a href="javascript:
if (!jsCode) {
var jsCode = document.createElement('script');
jsCode.setAttribute('src', 'http://xxx.co.uk/xxx/script.js');
document.body.appendChild(jsCode);
}
">Bookmarklet</a>
这个“污染”全局命名空间的变量为jsCode
,但这可能是一个必要的罪恶。您可以将其重命名为不太可能出现在运行书签的文档中。
请注意,虽然javascript
URI方案是好的,为的bookmarklet在这种情况下,它不被认为是正常使用一个很好的做法。
答
如果您创建在全球范围内(window.yourVariable)一个变量,并检查是否存在已经那么你可以决定是否要添加任何你在运行的script.js您jsCode代码片段或运行
答
只需检查选择器的长度。下面是使用jQuery的例子:
if ($('script[src="http://xxx.co.uk/xxx/script.js"]').length > 0) {
//script exists
}
答
你可以把你的script
标签id
属性和使用document.getElementById('your-id')
识别脚本是在页面上添加之前。
if (!document.getElementById('your-id')) {
// append your script to the document here, ensure it has its id attribute set to 'your-id'
}
答
在与本地和现场交替的情况下工作。
具体URL也许改变。我认为ID方法更好。
这是两个堆栈溢出答案的组合。
与ES6,没有jQuery的if (!document.getElementById('your-id')) {
addScript("your_script_src"); //adding script dynamically
}
function addScript(path) {
var head = document.getElementsByTagName("head")[0];
var s = document.createElement("script");
s.type = "text/javascript";
s.src = path;
s.id = "your-id";
head.appendChild(s);
}
function addCSSFile(path) {
var head = document.getElementsByTagName("head")[0];
var s = document.createElement("style");
s.type = "text/css";
s.src = path;
head.appendChild(s);
}
答
解决方案:
const url = 'http://xxx.co.uk/xxx/script.js';
function scriptExists(url) {
return document.querySelectorAll(`script[src="${url}"]`).length > 0;
}
if(scriptExists(url){
...
}
它不建议内联JS成HTML。相反,添加事件监听器:
function bookmark() {
if(scriptExists(url){
...
}
}
document.querySelectorAll('a.bookmark').addEventListener('click',
bookmark, false);
噢好吧,什么是现代的方式来创建bookmarklets现在一天? – benhowdle89 2012-03-11 22:05:04
这很好,我错过了早些时候它是一个小书签的事实......让我以一种有意义的方式重新添加它 – 2012-03-11 22:10:16