使用 Javascript 动态插入内联脚本时代码打印到 DOM

Question

我正在尝试使用 javascript 动态插入图表。我找到了一个如何做这样的事情的例子，它几乎可以工作。图表加载但随后在图表下方，用于显示图表的 Javascript 的一部分实际上显示为页面上的文本。否则它工作正常。

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="tvTest"></div>
<script>
/* helpers
 */

// runs an array of async functions in sequential order
function seq (arr, callback, index) {
  // first call, without an index
  if (typeof index === 'undefined') {
    index = 0
  }

  arr[index](function () {
    index++
    if (index === arr.length) {
      callback()
    } else {
      seq(arr, callback, index)
    }
  })
}

// trigger DOMContentLoaded
function scriptsDone () {
  var DOMContentLoadedEvent = document.createEvent('Event')
  DOMContentLoadedEvent.initEvent('DOMContentLoaded', true, true)
  document.dispatchEvent(DOMContentLoadedEvent)
}

/* script runner
 */

function insertScript ($script, callback) {
  var s = document.createElement('script')
  s.type = 'text/javascript'
  if ($script.src) {
    s.onload = callback
    s.onerror = callback
    s.src = $script.src
  } else {
    s.textContent = $script.innerText
  }

  // re-insert the script tag so it executes.
  document.head.appendChild(s)

  // clean-up
  $script.parentNode.removeChild($script)

  // run the callback immediately for inline scripts
  if (!$script.src) {
    callback()
  }
}

// https://html.spec.whatwg.org/multipage/scripting.html
var runScriptTypes = [
  'application/javascript',
  'application/ecmascript',
  'application/x-ecmascript',
  'application/x-javascript',
  'text/ecmascript',
  'text/javascript',
  'text/javascript1.0',
  'text/javascript1.1',
  'text/javascript1.2',
  'text/javascript1.3',
  'text/javascript1.4',
  'text/javascript1.5',
  'text/jscript',
  'text/livescript',
  'text/x-ecmascript',
  'text/x-javascript'
]

function runScripts ($container) {
  // get scripts tags from a node
  var $scripts = $container.querySelectorAll('script')
  var runList = []
  var typeAttr

  [].forEach.call($scripts, function ($script) {
    typeAttr = $script.getAttribute('type')

    // only run script tags without the type attribute
    // or with a javascript mime attribute value
    if (!typeAttr || runScriptTypes.indexOf(typeAttr) !== -1) {
      runList.push(function (callback) {
        insertScript($script, callback)
      })
    }
  })

  // insert the script tags sequentially
  // to preserve execution order
  seq(runList, scriptsDone)
}


$(document).ready(function() 
{
    var htmlContent = `<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
            <script type="text/javascript">
            new TradingView.widget({
            "width": 500,
            "height": 400,
            "symbol": "BINANCE:AMBETH",
            "interval": "60",
            "timezone": "Etc/UTC",
            "theme": "Dark",
            "style": "1",
            "locale": "en",
            "toolbar_bg": "#f1f3f6",
            "enable_publishing": false,
            "allow_symbol_change": true,
            "hideideas": true
            });
            </script>`;


    var $container = document.querySelector('#tvTest');
    $container.innerHTML = htmlContent;
    runScripts($container);
});
</script>
</body>
</html>

如果我运行那个，图表显示并且就在它下面，我在 DOM 中看到代码 var $container = document.querySelector('#tvTest'); $container.innerHTML = htmlContent; runScripts($container); }); 作为文本。如何在不向 DOM 打印任何代码的情况下渲染图表？

Answer 1

您需要转义字符串模板中的<\/script>

Answer 2

默认情况下，此交易视图库附加到正文。您可以通过传递 "container_id" 属性来覆盖它。这是您的代码的简化示例：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://s3.tradingview.com/tv.js"></script>
</head>
<body>
<div id="tvTest"></div>
<script type="text/javascript">
  new TradingView.widget({
  "container_id": "tvTest", // THIS IS THE LINE I ADDED
  "width": 500,
  "height": 400,
  "symbol": "BINANCE:AMBETH",
  "interval": "60",
  "timezone": "Etc/UTC",
  "theme": "Dark",
  "style": "1",
  "locale": "en",
  "toolbar_bg": "#f1f3f6",
  "enable_publishing": false,
  "allow_symbol_change": true,
  "hideideas": true
 });
</script>
</body>
</html>

使用 Javascript 动态插入内联脚本时代码打印到 DOM

Code Prints To DOM When Dynamically Inserting Inline Scripts With Javascript

javascript

dom

inject