자바 스크립트 스크립트가 페이지에 존재하는지 확인하십시오.

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

당신은 당신의 스크립트를 다음과 같이로드되어 있는지 여부를 확인할 수 있습니다

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

:

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

양자 택일로, 당신이 뭔가를 할 수 있습니다

이것은 전역 이름 공간을 jsCode 변수로 "오염"시키지만, 악의적 일 수 있습니다. 북마크 렛이 실행되는 문서에는 나타나지 않을 수있는 이름으로 바꿀 수 있습니다.

---

는 javascript URI 방식이 경우에 같은 북마크 괜찮 동안, 정상적인 사용에 대한 좋은 사례로 간주 아니에요 있습니다.

Answer 2

전역 범위 (window.yourVariable)에서 변수를 생성하고 당신이 script.js에서 실행중인 무엇이든 jsCode 조각 코드 또는 실행을 추가하려면 다음을 결정할 수 있습니다 이미 존재 여부를 확인하는 경우

Answer 3

선택기 길이를 확인하십시오. 여기에 jQuery를 사용하여 예입니다 : 당신은 당신의 script 태그에 id 특성을 배치하고 추가하기 전에 페이지에 스크립트가 있는지 여부를 확인하는 document.getElementById('your-id')을 사용할 수 있습니다

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

Answer 4

.

if (!document.getElementById('your-id')) { 
    // append your script to the document here, ensure it has its id attribute set to 'your-id' 
} 

Answer 5

지역 및 거주 중 택일 적으로 함께 일하는 경우.

정확한 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); 
} 

Answer 6

솔루션은 :

const url = 'http://xxx.co.uk/xxx/script.js'; 

function scriptExists(url) { 
    return document.querySelectorAll(`script[src="${url}"]`).length > 0; 
} 

if(scriptExists(url){ 
    ... 
} 

은 HTML로 JS 인라인하지 않는 것이 좋습니다. 대신에 이벤트 리스너를 추가하십시오.

function bookmark() { 
    if(scriptExists(url){ 
    ... 
    } 
} 

document.querySelectorAll('a.bookmark').addEventListener('click', 
bookmark, false);