Question

我有一种情况需要将外部内容导入dom元素，然后获取该输入并将其注入不同的dom元素。但是，它必须在没有任何库的情况下完成。

内容可以是脚本标签，标签，iframe等的混合......

在下面的示例中，我将外部内容保存到文本区域元素中，然后使用jQuery的append方法并将其保存到容器中，从而导致执行脚本以及将anchor元素添加到容器div。

＆＃13;

<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>

＆＃13;

无论如何在没有使用jQuery的情况下收到相同的结果？

Answer 1

是的，使用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>

Answer 2

JS运行时不会通过简单地从隐藏占位符复制脚本来运行脚本，因为运行时已经完成了对代码的解析。 必须将脚本作为新<script>元素注入才能进行处理。

另外，众所周知，依赖eval()是一种危险的做法，不惜一切代价避免使用。

此代码完全符合您的要求：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 3

将您的注射替换为：

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

在普通的javascript中使用jQuery的追加方法，必须运行Javascript代码

3 个答案: