sourcecode

현재 실행 중인 스크립트를 로드한 스크립트태그는 어떻게 참조할 수 있습니까?

copyscript 2022. 9. 14. 22:22

현재 실행 중인 스크립트를 로드한 스크립트태그는 어떻게 참조할 수 있습니까?

현재 실행 중인 Javascript를 로드한 스크립트 요소는 어떻게 참조할 수 있습니까?

이게 그 상황입니다.페이지 상부에 "마스터" 스크립트가 로드되어 있습니다.첫 번째로 HEAD 태그 아래에 있습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="scripts.js"></script>

"scripts.js"에는 다른 스크립트를 온 디맨드로 로드할 수 있는 스크립트가 있습니다.HEAD 요소가 렌더링을 완료하지 않았기 때문에 HEAD 태그를 참조하지 않고 새로운 스크립트를 추가해야 하기 때문에 일반 방법은 잘 작동하지 않습니다.

document.getElementsByTagName('head')[0].appendChild(v);

현재 스크립트를 로드한 스크립트 요소를 참조하여 동적으로 로드된 새 스크립트 태그를 DOM에 추가할 수 있도록 합니다.

<script type="text/javascript" src="scripts.js"></script>
loaded by scripts.js--><script type="text/javascript" src="new_script1.js"></script>
loaded by scripts.js --><script type="text/javascript" src="new_script2.js"></script>

현재 스크립트 요소를 가져오는 방법:

. 1. 을 사용합니다.`document.currentScript`

document.currentScript 를 반환하다<script>★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

<script>
var me = document.currentScript;
</script>

혜택들

심플하고 명료합니다.믿을 수 있는.
스크립트 태그를 수정할 필요가 없습니다.
비동기 스크립트」)로합니다.defer&async)
동적으로 삽입된 스크립트로 동작합니다.

문제

오래된 브라우저 및 IE에서는 작동하지 않습니다.
.<script type="module">

2. ID별로 스크립트 선택

스크립트에 id 속성을 지정하면 를 사용하여 id별로 쉽게 선택할 수 있습니다.

<script id="myscript">
var me = document.getElementById('myscript');
</script>

혜택들

심플하고 명료합니다.믿을 수 있는.
거의 보편적으로 지원
비동기 스크립트」)로합니다.defer&async)
동적으로 삽입된 스크립트로 동작합니다.

문제

스크립트 태그에 커스텀 속성 추가 필요
id 케이스의 경우 수 .

. '3'을 합니다.`data-*`

스크립트에 속성을 지정하면 내부에서 쉽게 선택할 수 있습니다.

<script data-name="myscript">
var me = document.querySelector('script[data-name="myscript"]');
</script>

이전 옵션에 비해 이점이 거의 없습니다.

혜택들

심플하고 명료합니다.
비동기 스크립트」)로합니다.defer&async)
동적으로 삽입된 스크립트로 동작합니다.

문제

스크립트 태그에 커스텀 속성 추가 필요
, »querySelector() in all browser에 준거하지 않음
를 사용하는 경우보다 지원 범위가 좁다id
<script>id엣지 케이스
다른 요소가 페이지에서 동일한 데이터 속성 및 값을 가질 경우 혼동될 수 있습니다.

4. src별로 스크립트를 선택합니다.

데이터 속성을 사용하는 대신 실렉터를 사용하여 소스별로 스크립트를 선택할 수 있습니다.

<script src="//example.com/embed.js"></script>

인베드라이브.js:

var me = document.querySelector('script[src="//example.com/embed.js"]');

혜택들

믿을 수 있는
비동기 스크립트」)로합니다.defer&async)
동적으로 삽입된 스크립트로 동작합니다.
사용자 지정 특성 또는 ID가 필요 없음

문제

로컬 스크립트에서 작동하지 않음
개발이나 실가동 등 다양한 환경에서 문제가 발생
정전기로 깨지기 쉽다.스크립트 파일의 위치를 변경하려면 스크립트를 수정해야 합니다.
를 사용하는 경우보다 지원 범위가 좁다id
동일한 스크립트를 두 번 로드하면 문제가 발생합니다.

5. 모든 스크립트를 루프하여 원하는 스크립트를 찾습니다.

또한 모든 스크립트 요소를 루프하여 각 요소를 개별적으로 확인하여 원하는 요소를 선택할 수도 있습니다.

<script>
var me = null;
var scripts = document.getElementsByTagName("script")
for (var i = 0; i < scripts.length; ++i) {
    if( isMe(scripts[i])){
      me = scripts[i];
    }
}
</script>

이를 중 "이러한 방법하지 않는 두 을 모두 할 수법은 "예"를 지원하지 않습니다.querySelector()속성과 잘 어울리죠.예를 들어 다음과 같습니다.

function isMe(scriptElem){
    return scriptElem.getAttribute('src') === "//example.com/embed.js";
}

는 어떤 , '''는 '''에 .querySelector()오래된 브라우저에서도 사용할 수 있습니다.

6. 마지막으로 실행한 스크립트를 가져옵니다.

스크립트는 순차적으로 실행되므로 마지막 스크립트 요소가 현재 실행 중인 스크립트가 되는 경우가 많습니다.

<script>
var scripts = document.getElementsByTagName( 'script' );
var me = scripts[ scripts.length - 1 ];
</script>

혜택들

간단하죠.
거의 보편적으로 지원
사용자 지정 특성 또는 ID가 필요 없음

문제

비동기 스크립트에서는 동작하지 않습니다(defer&async)
동적으로 삽입된 스크립트에서는 동작하지 않음

스크립트는 순차적으로 실행되므로 현재 실행 중인 스크립트태그는 항상 페이지의 마지막 스크립트태그입니다스크립트 태그를 취득하려면 다음 작업을 수행합니다.

var scripts = document.getElementsByTagName( 'script' );
var thisScriptTag = scripts[ scripts.length - 1 ];

쉬운 에 ' Tag'를 붙이는 입니다.id여하하다

here기이이 를 활용한 폴리필이 있습니다.document.CurrentScript아이디

<script id="uniqueScriptId">
    (function () {
        var thisScript = document.CurrentScript || document.getElementByID('uniqueScriptId');

        // your code referencing thisScript here
    ());
</script>

모든 스크립트 태그의 맨 위에 이 태그를 포함하면 어떤 스크립트태그가 기동하고 있는지 일관되게 알 수 있을 뿐만 아니라 비동기 콜백 컨텍스트에서 스크립트태그를 참조할 수도 있습니다.

테스트되지 않았으니 다른 사람에게 피드백을 남겨주세요.

스크립트는 "defer" 또는 "async" 속성이 없는 경우에만 순차적으로 실행됩니다.스크립트 태그의 ID/SRC/TITLE Atribute 중 하나를 알면 이러한 경우에도 기능합니다.그래서 Greg와 Justin의 제안은 모두 옳다.

에 대한 제안은 이미 있습니다.document.currentScriptWHATWG 목록에 있습니다.

편집: Firefox > 4는 이 매우 유용한 속성을 이미 구현하고 있지만, 마지막으로 확인한 IE11에서는 사용할 수 없으며 Chrome 29 및 Safari 8에서만 사용할 수 있습니다.

편집: "document.scripts" 컬렉션에 대해서는 아무도 언급하지 않았지만, 현재 실행 중인 스크립트를 입수하기 위해서는 다음 사항이 브라우저 간에 적합한 대안이 될 수 있습니다.

var me = document.scripts[document.scripts.length -1];

페이지 로드 시 및 javascript(ajax 등)에서 스크립트 태그가 추가되었을 때 동작해야 합니다.

<script id="currentScript">
var $this = document.getElementById("currentScript");
$this.setAttribute("id","");
//...
</script>

현재 사용할 수 있는 스크립트를 로드한 스크립트를 가져오려면

var thisScript = document.currentScript;

나중에 전화할 수 있도록 스크립트 처음에 레퍼런스를 보관해야 합니다.

var url = thisScript.src

비동기 및 지연 스크립트에 대처하기 위한 접근방식은 온로드 핸들러를 활용하여 모든 스크립트태그에 온로드 핸들러를 설정하고 최초로 실행하는 핸들러를 자신의 것으로 하는 것입니다.

function getCurrentScript(callback) {
  if (document.currentScript) {
    callback(document.currentScript);
    return;
  }
  var scripts = document.scripts;
  function onLoad() {
    for (var i = 0; i < scripts.length; ++i) {
      scripts[i].removeEventListener('load', onLoad, false);
    }
    callback(event.target);
  }
  for (var i = 0; i < scripts.length; ++i) {
    scripts[i].addEventListener('load', onLoad, false);
  }
}

getCurrentScript(function(currentScript) {
  window.console.log(currentScript.src);
});

현재 실행 중인 스크립트블록을 참조하려면 다음 간단한 절차를 수행합니다.

스크립트 블록 내에 임의의 고유 문자열을 삽입합니다(각 스크립트 블록에서 고유/다른 문자열 필요).
document.getElementsByTagName('script')의 결과를 반복하여 각 콘텐츠(innerText/textContent 속성에서 가져온)에서 원하는 문자열을 찾습니다.

예(ABCDE345678은 일의의 ID)

<script type="text/javascript">
var A=document.getElementsByTagName('script'),i=count(A),thi$;
for(;i;thi$=A[--i])
  if((thi$.innerText||thi$.textContent).indexOf('ABCDE345678'))break;
// Now thi$ is refer to current script block
</script>

그런데, 당신의 경우, 구식 문서를 간단히 사용할 수 있습니다.다른 스크립트를 포함하는 write() 메서드.DOM이 아직 렌더링되지 않았다고 언급했듯이, 브라우저가 항상 선형 순서로 스크립트를 실행하므로(나중에 렌더링될 지연 스크립트를 제외하고) 문서의 나머지 부분은 여전히 "존재하지 않음"입니다.당신이 문서를 통해 쓰는 모든 것.write()는 발신자 스크립트 바로 뒤에 배치됩니다.

원본 HTML 페이지의 예:

<!doctype html>
<html><head>
<script src="script.js"></script>
<script src="otherscript.js"></script>
<body>anything</body></html>

script.js의 내용:

document.write('<script src="inserted.js"></script>');

렌더링 후 DOM 구조는 다음과 같이 됩니다.

HEAD
  SCRIPT script.js
  SCRIPT inserted.js
  SCRIPT otherscript.js
BODY

이 알고리즘을 검토해 주십시오.스크립트가 로드되면(같은 스크립트가 여러 개 있는 경우), document.scripts를 살펴보고 올바른 "src" 속성을 가진 첫 번째 스크립트를 찾아 저장하고 데이터 속성 또는 고유한 className을 사용하여 "vised"로 표시합니다.

다음 스크립트가 로드되면 document.scripts를 다시 스캔하여 이미 방문한 것으로 표시된 스크립트를 전달합니다.해당 스크립트의 첫 번째 방문되지 않은 인스턴스를 사용합니다.

이는 동일한 스크립트가 머리부터 몸통, 위에서 아래로 동기에서 비동기 순으로 실행된다고 가정합니다.

(function () {
  var scripts = document.scripts;

  // Scan for this data-* attribute
  var dataAttr = 'data-your-attribute-here';

  var i = 0;
  var script;
  while (i < scripts.length) {
    script = scripts[i];
    if (/your_script_here\.js/i.test(script.src)
        && !script.hasAttribute(dataAttr)) {

        // A good match will break the loop before
        // script is set to null.
        break;
    }

    // If we exit the loop through a while condition failure,
    // a check for null will reveal there are no matches.
    script = null;
    ++i;
  }

  /**
   * This specific your_script_here.js script tag.
   * @type {Element|Node}
   */
  var yourScriptVariable = null;

  // Mark the script an pass it on.
  if (script) {
    script.setAttribute(dataAttr, '');
    yourScriptVariable = script;
  }
})();

그러면 모든 스크립트에서 특수 속성이 표시되지 않은 첫 번째 일치하는 스크립트가 검색됩니다.

그런 다음 노드를 찾은 경우 후속 검색에서 해당 노드를 선택하지 않도록 데이터 속성을 표시합니다.이는 재방문을 방지하기 위해 노드를 '방문'으로 표시할 수 있는 그래프 통과 BFS 및 DFS 알고리즘과 유사합니다.

FF3, IE6, 7에서 동작하고 있는 것이 있습니다.페이지 로드가 완료될 때까지 주문형으로 로드된 스크립트의 메서드를 사용할 수 없지만 이 방법은 여전히 유용합니다.

//handle on-demand loading of javascripts
makescript = function(url){
    var v = document.createElement('script');
    v.src=url;
    v.type='text/javascript';

    //insertAfter. Get last <script> tag in DOM
    d=document.getElementsByTagName('script')[(document.getElementsByTagName('script').length-1)];
    d.parentNode.insertBefore( v, d.nextSibling );
}

는 입었 i i i를 삽입하고 있었다.script으로 태그를 지정합니다.eval 됩니다.currentComponentScriptDOM dom 、 DOM dom dom dom 。

  const old = el.querySelector("script")[0];
  const replacement = document.createElement("script");
  replacement.setAttribute("type", "module");
  replacement.appendChild(document.createTextNode(old.innerHTML));
  window.currentComponentScript = replacement;
  old.replaceWith(replacement);

이치노DOM은 다음 매크로태스크까지 스크립트를 실행하지 않기 때문에 이들 중 배지는 마지막 값 세트만 표시합니다. 해야 setTimeout 단락,그에 전전 the, the the the the the the the the thesetTimeout콜뿐만 아니라한다.setTimeout여러 번 반복할 수 있습니다.

스크립트의 파일 이름을 가정할 수 있으면 찾을 수 있습니다.지금까지 Firefox에서 실제로 테스트한 기능은 다음과 같습니다.

  function findMe(tag, attr, file) {
    var tags = document.getElementsByTagName(tag);
    var r = new RegExp(file + '$');
    for (var i = 0;i < tags.length;i++) {
      if (r.exec(tags[i][attr])) {
        return tags[i][attr];
      }
    }
  };
  var element = findMe('script', 'src', 'scripts.js');

다음 코드가 가장 일관되고 성능적이며 단순하다는 것을 알게 되었습니다.

var scripts = document.getElementsByTagName('script');
var thisScript = null;
var i = scripts.length;
while (i--) {
  if (scripts[i].src && (scripts[i].src.indexOf('yourscript.js') !== -1)) {
    thisScript = scripts[i];
    break;
  }
}
console.log(thisScript);

언급URL : https://stackoverflow.com/questions/403967/how-may-i-reference-the-script-tag-that-loaded-the-currently-executing-script

'sourcecode' 카테고리의 다른 글

Java를 사용하여 멀티파트/폼데이터 POST 요청을 하려면 어떻게 해야 합니까? (0)	2022.09.14
디폴트 방식의 인터페이스는 언제 초기화됩니까? (0)	2022.09.14
MariaDB: 시작 후 바로 종료 (0)	2022.09.14
리액트 JSX 내부 루프 (0)	2022.09.14
python 다중 반환 값 무시 (0)	2022.09.14

현재글현재 실행 중인 스크립트를 로드한 스크립트태그는 어떻게 참조할 수 있습니까?

각종 프로그래밍 정보를 다루는 블로그입니다.

Spring-Boot, JavaScript, WordPress, reactjs, Java, JSON, Powershell, php, oracle, vuex, vuejs2, MySQL, jquery, mongoDB, C, Ajax, MariaDB, Git, angularjs, Python,

Today :
Yesterday :

일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

copyscript

현재 실행 중인 스크립트를 로드한 스크립트태그는 어떻게 참조할 수 있습니까?

현재 실행 중인 스크립트를 로드한 스크립트태그는 어떻게 참조할 수 있습니까?

현재 스크립트 요소를 가져오는 방법:

. 1. 을 사용합니다.`document.currentScript`

혜택들

문제

2. ID별로 스크립트 선택

혜택들

문제

. '3'을 합니다.`data-*`

혜택들

문제

4. src별로 스크립트를 선택합니다.

혜택들

문제

5. 모든 스크립트를 루프하여 원하는 스크립트를 찾습니다.

6. 마지막으로 실행한 스크립트를 가져옵니다.

혜택들

문제

'sourcecode' 카테고리의 다른 글

'sourcecode'의 다른글

티스토리툴바

현재 실행 중인 스크립트를 로드한 스크립트태그는 어떻게 참조할 수 있습니까?

현재 실행 중인 스크립트를 로드한 스크립트태그는 어떻게 참조할 수 있습니까?

현재 스크립트 요소를 가져오는 방법:

. 1. 을 사용합니다.document.currentScript

혜택들

문제

2. ID별로 스크립트 선택

혜택들

문제

. '3'을 합니다.data-*

혜택들

문제

4. src별로 스크립트를 선택합니다.

혜택들

문제

5. 모든 스크립트를 루프하여 원하는 스크립트를 찾습니다.

6. 마지막으로 실행한 스크립트를 가져옵니다.

혜택들

문제

'sourcecode' 카테고리의 다른 글

'sourcecode'의 다른글

관련글

티스토리툴바

. 1. 을 사용합니다.`document.currentScript`

. '3'을 합니다.`data-*`