스크립트 태그에 매개 변수를 전달하는 방법은 무엇입니까?

Question 1

튜토리얼 DIY 위젯 -Dr. Nic의 XSS 위젯을 위해 다른 사이트 에 사이트를 삽입하는 방법을 읽었습니다 .

스크립트 태그에 매개 변수를 전달하는 방법을 찾고 있습니다. 예를 들어, 다음 작업을 수행하려면 :

<script src="http://path/to/widget.js?param_a=1&amp;param_b=3"></script>

이를 수행하는 방법이 있습니까?

두 가지 흥미로운 링크 :

Question 2

나는 아주 오래된 질문에 답한 것에 대해 사과하지만 위의 해결책으로 레슬링 한 시간을 보낸 후 더 간단한 것을 선택했습니다.

<script src=".." one="1" two="2"></script>

위 스크립트 내부 :

document.currentScript.getAttribute('one'); //1
document.currentScript.getAttribute('two'); //2

jquery 또는 url 구문 분석보다 훨씬 쉽습니다.

IE에 대한 @Yared Rodriguez의 답변에서 doucment.currentScript에 대한 polyfil이 필요할 수 있습니다.

document.currentScript = document.currentScript || (function() {
  var scripts = document.getElementsByTagName('script');
  return scripts[scripts.length - 1];
})();

Question 3

HTML5 5 데이터 속성 에서 기능을 사용하는 것이 더 좋습니다.

<script src="http://path.to/widget.js" data-width="200" data-height="200">
</script>

http://path.to/widget.js 스크립트 파일 내 에서 다음과 같은 방식으로 매개 변수를 가져올 수 있습니다.

<script>
function getSyncScriptParams() {
         var scripts = document.getElementsByTagName('script');
         var lastScript = scripts[scripts.length-1];
         var scriptName = lastScript;
         return {
             width : scriptName.getAttribute('data-width'),
             height : scriptName.getAttribute('data-height')
         };
 }
</script>

Question 4

알았다. 일종의 해킹이지만 꽤 잘 작동합니다.

var params = document.body.getElementsByTagName('script');
query = params[0].classList;
var param_a = query[0];
var param_b = query[1];
var param_c = query[2];

스크립트 태그의 매개 변수를 클래스로 전달합니다.

<script src="http://path.to/widget.js" class="2 5 4"></script>

이 기사 는 많은 도움 이 되었습니다.

Question 5

또 다른 방법은 메타 태그를 사용하는 것입니다. JavaScript로 전달되어야하는 데이터는 다음과 같이 할당 할 수 있습니다.

<meta name="yourdata" content="whatever" />
<meta name="moredata" content="more of this" />

그런 다음 다음과 같이 메타 태그에서 데이터를 가져올 수 있습니다 (DOMContentLoaded 이벤트 핸들러에서 가장 잘 수행됨).

var data1 = document.getElementsByName('yourdata')[0].content;
var data2 = document.getElementsByName('moredata')[0].content;

jQuery 또는 그와 비슷한 것들이 전혀 번거롭지 않으며, 해킹과 해결 방법이 필요하지 않으며, 메타 태그를 지원하는 모든 HTML 버전에서 작동합니다.

Question 6

JQuery에는 HTML에서 자바 스크립트로 매개 변수를 전달하는 방법이 있습니다.

이것을 myhtml.html파일에 넣으십시오 .

<!-- Import javascript -->
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<!-- Invoke a different javascript file called subscript.js -->
<script id="myscript" src="subscript.js" video_filename="foobar.mp4">/script>

같은 디렉토리에 subscript.js파일을 만들고 거기에 넣으십시오.

//Use jquery to look up the tag with the id of 'myscript' above.  Get 
//the attribute called video_filename, stuff it into variable filename.
var filename = $('#myscript').attr("video_filename");

//print filename out to screen.
document.write(filename);

결과 분석 :

myhtml.html 페이지를로드하면 'foobar.mp4'가 화면에 인쇄됩니다. video_filename이라는 변수가 html에서 javascript로 전달되었습니다. Javascript는 그것을 화면에 인쇄했고 부모의 html에 포함 된 것처럼 보였습니다.

위의 내용이 작동한다는 jsfiddle 증명 :

http://jsfiddle.net/xqr77dLt/

Question 7

jquery를 사용하는 경우 데이터 방법 을 고려할 수 있습니다 .

나는 당신이 당신의 응답에서 시도하는 것과 비슷한 것을 사용했지만 다음과 같습니다.

<script src="http://path.to/widget.js" param_a = "2" param_b = "5" param_c = "4">
</script>

GET 매개 변수를 직접 가져올 수있는 함수를 만들 수도 있습니다 (이것이 제가 자주 사용하는 것입니다).

function $_GET(q,s) {
    s = s || window.location.search;
    var re = new RegExp('&'+q+'=([^&]*)','i');
    return (s=s.replace(/^\?/,'&').match(re)) ? s=s[1] : s='';
}

// Grab the GET param
var param_a = $_GET('param_a');

Question 8

그것은 매우 오래된 스레드이지만 누군가가 해결책을 찾으면 여기에 오면 도움이 될 수도 있습니다.

기본적으로 document.currentScript를 사용하여 코드가 실행되는 위치에서 요소를 가져오고 찾고있는 변수의 이름을 사용하여 필터링했습니다. "get"이라는 메서드를 사용하여 currentScript를 확장 했으므로 다음을 사용하여 해당 스크립트 내부의 값을 가져올 수 있습니다.

document.currentScript.get('get_variable_name');

이런 식으로 표준 URI를 사용하여 특수 속성을 추가하지 않고도 변수를 검색 할 수 있습니다.

이것이 최종 코드입니다.

document.currentScript.get = function(variable) {
    if(variable=(new RegExp('[?&]'+encodeURIComponent(variable)+'=([^&]*)')).exec(this.src))
    return decodeURIComponent(variable[1]);
};

나는 IE에 대해 잊고 있었다 :) 그렇게 쉬울 수는 없었다. 나는 document.currentScript가 HTML5 속성이라는 것을 언급하지 않았다. 다른 버전의 IE에는 포함되지 않았습니다 (IE11까지 테스트했지만 아직 없었습니다). IE 호환성을 위해이 부분을 코드에 추가했습니다.

document.currentScript = document.currentScript || (function() {
  var scripts = document.getElementsByTagName('script');
  return scripts[scripts.length - 1];
})();

여기서 우리가하는 일은 현재 스크립트 객체를 반환하는 IE에 대한 대체 코드를 정의하는 것입니다.이 코드는 솔루션에서 src 속성에서 매개 변수를 추출하는 데 필요합니다. 몇 가지 제한이 있기 때문에 이것은 IE를위한 완벽한 솔루션이 아닙니다. 스크립트가 비동기 적으로로드되는 경우. 최신 브라우저에는 ".currentScript"속성이 포함되어야합니다.

도움이되기를 바랍니다.

Question 9

jQuery 덕분에 간단한 HTML5 호환 솔루션은 div와 같은 추가 HTML 태그를 만들어 데이터를 저장하는 것입니다.

HTML :

<div id='dataDiv' data-arg1='content1' data-arg2='content2'>
  <button id='clickButton'>Click me</button>
</div>

자바 스크립트 :

$(document).ready(function() {
    var fetchData = $("#dataDiv").data('arg1') + 
                    $("#dataDiv").data('arg2') ;

    $('#clickButton').click(function() {
      console.log(fetchData);
    })
});

위 코드를 사용한 라이브 데모 : http://codepen.io/anon/pen/KzzNmQ?editors=1011#0

라이브 데모에서 HTML5 data- * 속성의 데이터를 연결하여 로그에 인쇄 할 수 있습니다.

출처 : https://api.jquery.com/data/

Question 10

숨겨진 입력과 같이 다른 스크립트가 검색 할 수있는 곳에 필요한 값을 넣은 다음 새 스크립트를 초기화 할 때 해당 값을 컨테이너에서 가져옵니다. 모든 매개 변수를 하나의 숨겨진 필드에 JSON 문자열로 넣을 수도 있습니다.

Question 11

다음과 같이 매개 변수 목록을 포함하는 속성을 만듭니다.

<script src="http://path/to/widget.js" data-params="1, 3"></script>

그런 다음 JavaScript에서 매개 변수를 배열로 가져옵니다.

var script = document.currentScript || 
/*Polyfill*/ Array.prototype.slice.call(document.getElementsByTagName('script')).pop();

var params = (script.getAttribute('data-params') || '').split(/, */);

params[0]; // -> 1
params[1]; // -> 3

Question 12

가능한 한 오래된 브라우저를 많이 지원하는 솔루션을 원했습니다. 그렇지 않으면 currentScript 또는 데이터 속성 방법이 가장 세련 될 것이라고 말하고 싶습니다 .

이것은 아직 여기에 언급되지 않은 유일한 방법입니다. 특히 어떤 이유로 많은 양의 데이터가있는 경우 최상의 옵션은 다음과 같습니다.

localStorage

/* On the original page, you add an inline JS Script: */
<script>
   localStorage.setItem('data-1', 'I got a lot of data.');
   localStorage.setItem('data-2', 'More of my data.');
   localStorage.setItem('data-3', 'Even more data.');
</script>

/* External target JS Script, where your data is needed: */
var data1 = localStorage.getItem('data-1');
var data2 = localStorage.getItem('data-2');
var data3 = localStorage.getItem('data-3');

localStorage는 최신 브라우저를 완벽하게 지원하고 IE 8, Firefox 3,5 및 Safari 4 [11 년 전]로 돌아가는 이전 브라우저도 놀라 울 정도로 잘 지원합니다.

데이터가 많지 않지만 광범위한 브라우저 지원을 원하는 경우 가장 좋은 방법은 다음과 같습니다.

메타 태그 [by Robidu]

/* HTML: */
<meta name="yourData" content="Your data is here" />

/* JS: */
var data1 = document.getElementsByName('yourData')[0].content;

이것의 결점은 [HTML 4까지] 메타 태그를 넣을 올바른 위치가 헤드 태그에 있고,이 데이터가 거기에있는 것을 원하지 않을 수도 있다는 것입니다. 이를 방지하거나 본문에 메타 태그를 삽입하려면 다음을 사용할 수 있습니다.

숨겨진 단락

/* HTML: */
<p hidden id="yourData">Your data is here</p>

/* JS: */
var yourData = document.getElementById('yourData').innerHTML;

더 많은 브라우저 지원을 위해 숨겨진 속성 대신 CSS 클래스를 사용할 수 있습니다.

/* CSS: */
.hidden {
   display: none;
}

/* HTML: */
<p class="hidden" id="yourData">Your data is here</p>

Question 13

이것이 jQuery 3.4 의 솔루션입니다.

<script src="./js/util.js" data-m="myParam"></script>

$(document).ready(function () {
    var m = $('script[data-m][data-m!=null]').attr('data-m');
})