2014-09-02 4 views
0

데이터 배열을 취하여 html을 추가하거나 인라인 js 또는 외부 js를 실행하는 함수를 작성했습니다. 스크립트 src를 감지하는 더 깨끗한 방법이 있습니까? 아마도 조건 대신 단일 정규식을 사용합니까? 여기 자바 스크립트 또는 인라인 자바 스크립트 또는 외부 스크립트를 검색하는 자바 스크립트

는 jsfiddle입니다 : http://jsfiddle.net/nfrobmxt/

<!doctype> 
<html> 
<head></head> 

    <body> 

<div id="content"></div> 

<script> 

// Execute inline js. 
function _append(selector, arr) { 
    var content = arr; 
    for(var i = 0; i< content.length; i++) { 
     var _content = content[i]; 
     var js = _content.indexOf('script'); 
     var src = _content.indexOf('src='); 
     // Script tag. 
     if(js > -1) { 
      var inline = ''; 
      var script = document.createElement('script'); 
      script.type = 'text/javascript'; 
      if(src > -1) { 
       script.src = 'http://chrismills.la/test.js'; 
      } else { 
       _content.replace(/<script[^>]*>([\s\S]*?)<\/script>/gi, function(){ 
        inline += arguments[1] + '\n'; 
       }); 
       script.text = inline; 
      } 
      selector.appendChild(script); 
     } else { 
      selector.innerHTML += _content; 
     } 
    } 
} 
// Selector - div or tag. 
var selector = document.body; 

// String with inline javascript. 
var arr = []; 
// Inline javascript. 
arr.push('<script>alert("inline javascript");</\script>'); 
arr.push('<script>alert("more inline javascript");</\script>'); 
// External script. 
arr.push('<script src="http://chrismills.la/test.js"></\script>'); 
// HTML. 
arr.push('<p>Content.</p>'); 
arr.push('<p>More Content.</p><p>More Content 2.</p>'); 

_append(selector, arr); 
    </script> 

     </body> 
</html> 
+1

, 당신은 단지'document.getElementByTagName ('스크립트') '와 스크립트를 찾아 그들이 가지고 있는지 확인 할 수있는' –

+0

을 src' 스크립트로드 또는 실행되지 않습니다 그러나 그 기능의 일부분에서. 인라인 vs 외부로드하는 방법을 감지하고 있습니다. – user1572796

+0

그래서 'HTML'인 경우 배열 요소의 데이터를 추가하려고하지만 인라인 자바 스크립트가있는 경우 자바 스크립트를 대신 실행 하시겠습니까? 확실하지는 않지만 'HTML'태그를 인라인 스크립트 나 외부 스크립트 태그를 실행하지 않는 태그로 적절하게 추가하지 않는가? 나는 사람들이 자바 스크립트를 이런 방식으로 주입하는 것을 보았고 정상적으로 작동하는 것으로 보인다. – mechalynx

답변

1

하지 이상적인 솔루션 그러나 나는 하나 개의 함수로 모든 것을 할 수 있었다.

// Append js and html. 
function _append(selector, arr) { 
    var content = arr; 
    for(var i = 0; i< content.length; i++) { 
     var _content = content[i]; 
     var js = _content.indexOf('script'); 
     if(js > -1) { 
      // Script tag. 
      var script = document.createElement('script'); 
      script.type = 'text/javascript'; 
      var regex = /<script.*?src="(.*?)"/gmi; 
      var url = regex.exec(_content); 
      var inline = ''; 
      if(url) { 
       script.src = url[1]; 
      } 
      _content.replace(/<script[^>]*>([\s\S]*?)<\/script>/gi, function(){ 
       inline += arguments[1] + '\n'; 
      }); 
      script.text = inline; 
      selector.appendChild(script); 
     } else { 
      // html content. 
      selector.innerHTML += _content; 
     } 
    } 
} 
// Selector - div or tag. 
var selector = document.body; 

// String with inline javascript. 
var arr = []; 
// Inline javascript. 
arr.push('<script>alert("inline javascript");</\script>'); 
arr.push('<script>alert("more inline javascript");</\script>'); 
// External script. 
arr.push('<script type="text/javascript" src="http://chrismills.la/test.js"></\script>'); 
// HTML. 
arr.push('<p>Content.</p>'); 
arr.push('<p>More Content.</p><p>More Content 2.</p>'); 

_append(selector, arr); 
0

Jon Snow의 의견은 더 간단한 해결책을 제시합니다. 예 : 정규식을 필요로 정말 해달라고

var counter = 0; 
var scripts = document.getElementsByTagName('script'); 
Array.prototype.forEach.call(scripts, function(script, index){ 
    if(!script.hasAttribute("src")){counter++;} 
}); 
console.log(scripts.length +" total script tags. "+counter + " inline script tags found")