Question

我有一个我制作的书签，它将我的服务器上的脚本加载到用户当前页面。但是我在我的脚本中检查了if如果不满足条件则不采取任何措施。但是，如果用户满足该条件，则运行代码，但导致在其页面中插入两组脚本。我可以阻止这个吗？

 <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>

Answer 1

您可以检查脚本是否像这样加载：

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是可行的，但在这种情况下，它不被认为是正常使用的好习惯。

Answer 2

只需检查选择器长度。这是一个使用jQuery的例子：

if ($('script[src="http://xxx.co.uk/xxx/script.js"]').length > 0) {
    //script exists
}

Answer 3

您可以在id代码上放置script个属性，并在添加之前使用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'
}

Answer 4

使用ES6解决方案，没有jQuery：

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);

Answer 5

如果您在全局范围（window.yourVariable）中创建一个变量并检查它是否已存在，那么您可以决定是否要添加jsCode代码段或运行在script.js中运行的任何内容

Answer 6

如果使用本地和现场替代。

确切的网址可能会发生变化。我认为ID方法更好。

这是两个堆栈溢出答案的组合。

    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);
}

Answer 7

 

    function sortBubble() {
          for (var i = 0; i  chart.data.datasets[0].data[j]) {
                var temp = chart.data.datasets[0].data[j];
                chart.data.datasets[0].data[j] = chart.data.datasets[0].data[j-1];
                chart.data.datasets[0].data[j-1] = temp;
            }
          }
      }     
    
      chart.update();
                }
    
    var ctx = document.getElementById('myChart').getContext('2d');
    var chart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Number_1', 'Number_2', 'Number_3', 'Number_4', 'Number_5', 'Number_6'],
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        },
        animation: {
          onProgress: function(animation) {
                duration:4000
               
          }
                }
    });

嗨，这对我有用，请在需要时尝试

检查页面上是否存在Javascript脚本

7 个答案: