튜토리얼 DIY 위젯 -Dr. Nic의 XSS 위젯을 위해 다른 사이트 에 사이트를 삽입하는 방법을 읽었습니다 .
스크립트 태그에 매개 변수를 전달하는 방법을 찾고 있습니다. 예를 들어, 다음 작업을 수행하려면 :
<script src="http://path/to/widget.js?param_a=1&param_b=3"></script>
이를 수행하는 방법이 있습니까?
두 가지 흥미로운 링크 :
- jQuery에 의존하는 자바 스크립트 위젯을 알려지지 않은 환경에 임베드하는 방법 (Stackoverflow 토론)
- 매개 변수를 스크립트 태그에 전달하는 방법에 대한 기사
답변
나는 아주 오래된 질문에 답한 것에 대해 사과하지만 위의 해결책으로 레슬링 한 시간을 보낸 후 더 간단한 것을 선택했습니다.
<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];
})();
답변
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>
답변
답변
또 다른 방법은 메타 태그를 사용하는 것입니다. 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 버전에서 작동합니다.
답변
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 증명 :
답변
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');
답변
그것은 매우 오래된 스레드이지만 누군가가 해결책을 찾으면 여기에 오면 도움이 될 수도 있습니다.
기본적으로 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”속성이 포함되어야합니다.
도움이되기를 바랍니다.
