使用在普通的JavaScript jQuery的append方法，必須運行JavaScript代碼

我有一個情況我需要導入外部內容到DOM元素，然後採取輸入，並將其注入到一個不同的DOM元素。但是，它必須在沒有任何圖書館的情況下完成。使用在普通的JavaScript jQuery的append方法，必須運行JavaScript代碼

內容可以是文字標籤，一個標籤，I幀等的混合...

在下面的例子中，我節省了外部內容到文本區域元素，那麼使用jQuery的append方法並保存它放入容器中，這會導致執行腳本的和加法錨定元件的所述容器的div。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <textarea style="display:none" id ="thirdParty"> 
 
    <a href="http://www.google.com"> 
 
     test 
 
    </a> 
 
    <script> 
 
     alert("3rd party content"); 
 

 
    </script> 
 
    </textarea> 
 

 
    <div id="container"> 
 

 
    </div> 
 

 
    <button onclick="inject()"> 
 
    Test 
 
    </button> 
 

 
    <script> 
 
    function inject() { 
 
     $('#container').append(document.getElementById('thirdParty').value); 
 
    } 
 
    </script> 
 

 
</body>

反正是有收到相同的結果沒有的jQuery的使用情況如何？

來源

2016-11-17 user5841295

我已經更新了答案。它現在功能完全，不依賴'eval（）'。這是解決此問題的正確方法。 –

是，使用innerHTML：

document.getElementById('container').innerHTML += document.getElementById('thirdParty').value

希望這有助於。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <textarea style="display:none" id ="thirdParty"> 
 
    <a href="http://www.google.com"> 
 
     test 
 
    </a> 
 
    <script> 
 
     alert("3rd party content"); 
 
    </script> 
 
    </textarea> 
 

 
    <div id="container"> 
 

 
    </div> 
 

 
    <button onclick="inject()"> 
 
    Test 
 
    </button> 
 

 
    <script> 
 
    function inject() { 
 
     document.getElementById('container').innerHTML += document.getElementById('thirdParty').value; 
 

 
     var elements = document.getElementById('container').getElementsByTagName('script') 
 
     for (var i = 0; i < elements.length; i++){ 
 
     eval(elements[i].innerHTML); 
 
     } 
 
    } 
 
    </script> 
 
</body>

來源

2016-11-17 15:39:33

我已經試過了，但不幸的是腳本（本例中的警報消息）沒有得到與jQuery的，這是我需要的執行情況。 – user5841295

好吧，如果你插入一個innerHTML的javascript代碼[它不會自動除非你使用jQuery或MooTools的執行（http://stackoverflow.com/questions/1197575/can-scripts-be-inserted-with-innerhtml）。所以你必須手動「評估」它，根據相關的答案。 –

@RobertoLinares不正確，請參閱我的回答。 –

-1

替換您注射到：

function inject() { 
    document.getElementById('container').innerHTML += document.getElementById('thirdParty').value; 
}

來源

2016-11-17 15:45:41 JKong

的JS運行時不會被簡單地從隱藏的佔位符複製腳本，因爲運行時已經完成解析運行腳本代碼。 該腳本必須注入爲一個NEW <script>元素以供處理。

此外，依靠eval()廣爲人知是危險的做法，不惜一切代價避免。

此代碼你正在尋找什麼：

var btn = document.getElementById("btnGo"); 
 
btn.addEventListener("click", inject); 
 
var output = document.getElementById("container"); 
 

 
function inject() { 
 
    
 
     // It's important to extract the contents of a textarea without parsing 
 
     // so use ".textContent", instead of ".innerHTML". Otherwise, you'll 
 
     // get the "<" and ">" characters as "&lt;" and "&gt;" 
 
     var newContent = document.getElementById("thirdParty").textContent; 
 
    
 
     // We'll need to separate the <script> from the non-script content *** 
 
     var start = newContent.indexOf("<script>") + 8; 
 
     var end = newContent.indexOf("<\/script>"); 
 
     var scriptCode = newContent.substring(start, end); 
 
     console.log("Script code is: " + scriptCode); 
 
    
 
     var nonScriptCode = newContent.replace(scriptCode, "").replace("<script>","").replace("<\/script>",""); 
 
     console.log("Non-script code is: " + nonScriptCode); 
 

 
     // ******************************************************************* 
 
    
 
     // In order for the script to execute properly, it must be injected into 
 
     // the DOM as a NEW script, not simply moved from one location to the other. 
 
     var scriptNode = document.createElement("script"); 
 

 
     // And here, we also don't want the content to be parsed as HTML 
 
     // (in case there are < symbols in the script) so we use ".textContent" again. 
 
     scriptNode.textContent = scriptCode; 
 
    
 
     // Then we can inject that script into the DOM 
 
     output.appendChild(scriptNode); 
 
    
 
     // Now, when injecting the content into another element, it's important 
 
     // that the contents do get parsed, so here we use ".innerHTML" 
 
     output.innerHTML= nonScriptCode; 
 
}

<textarea style="display:none" id ="thirdParty"> 
 
    <a href="http://www.google.com"> 
 
     test 
 
    </a> 
 
    <script> 
 
     alert("3rd party content"); 
 

 
    </script> 
 
</textarea> 
 

 
<div id="container"> 
 

 
</div> 
 

 
<button id="btnGo"> 
 
    Test 
 
</button>

來源

2016-11-17 15:51:36

它不起作用。我沒有戒備？ – Liam

@Liam這只是因爲堆棧溢出片段環境。你可以看到鏈接出現，點擊它會「嘗試」導航你，但是SO片段環境再次阻止了實際的導航。 –

不，實際上，它不起作用https://jsfiddle.net/jz2gc1yx/ – Liam

使用在普通的JavaScript jQuery的append方法，必須運行JavaScript代碼

回答

相關問題