用div和脚本的另一个HTML代码块更改内部HTML

Question

我一直在努力，希望有人可以提供帮助！ 因此，当我的框架接收到来自页面代码的消息时，我希望将段落的内部html更改为另一个包含div和脚本的html元素。 我只有在内部html设置为用这样的普通字符串替换时才有效

document.getElementById('demo').innerHTML =   "testing" ;

正确的替换显示在这里

<p id="demo">testing</p>

但是当我尝试传递其他html来替换该部分时，如下所示：

document.getElementById('demo').innerHTML =   
'<div id="tlkio" data-channel="regerhtrh" data-theme="theme--night" style="width:100%;height:400px;"></div><script async src="https://tlk.io/embed.js" type="text/javascript"></script>';

这是行不通的。 我认为这不是报价问题，因为我在外面用单引号引起来。 不知道还有什么尝试。 以下是完整的html，我将不胜感激！

<!doctype html>
<html>
<head>

<script type="text/javascript">

function init () {
  // when a message is received from the page code
  window.onmessage = (event) => {
    if (event.data) {
      console.log("HTML Code Element received a message!");
      insertMessage(event.data);
    }
  }
}

// display received message
function insertMessage(msg) {
  document.getElementById('demo').innerHTML =   
  '<div id="tlkio" data-channel="regerhtrh" data-theme="theme--night" style="width:100%;height:400px;"></div><script async src="https://tlk.io/embed.js" type="text/javascript"></script>'
 ;


}
</script>

</head>

<body onload="init();" style="background-color:lightgray;">
<h1>HTML Component Test</h1>
<p id="demo">



  should put html here
</p>
</body>
</html>

Answer 1

您可以考虑交换使用的报价：

function insertMessage(msg) {
  var myHtml = "<div id='tlkio' data-channel='regerhtrh' data-theme='theme--night' style='width: 100%; height:400px;'></div><script async src='https://tlk.io/embed.js' type='text/javascript'></script>";
  document.getElementById('demo').innerHTML = myHtml;
}

这可能会添加它，但可能无法渲染它。 您可以考虑创建元素并附加它们。

function insertMessage(msg) {
  var tlkio = document.createElement("div");
  tlkio.style.width = "100%";
  tlkio.style.width = "400px";
  tlkio.setAttribute('data-channel', 'regerhtrh');
  tlkio.setAttribute('data-theme', 'theme--night');

  var tlkScript = document.createElement("script");
  tlkScript.src = 'https://tlk.io/embed.js';
  tlkScript.type = 'text/javascript';
  tlkScript.async = true;

  document.getElementById('demo').append(tlkio, tlkScript);
}

根据此处的一些研究：异步加载脚本，最好将脚本附加到<head> 。

希望能有所帮助。

更新1

根据您的提琴，一旦更新，它就会按照您的建议工作： https : //jsfiddle.net/Twisty/62fdybc0/7/

将以下内容添加到#myDIV元素：

<div style="width: 100%; height: 400px;" data-channel="regerhtrh" data-theme="theme--night"></div><script src="https://tlk.io/embed.js" type="text/javascript" async="async"></script>

Answer 2

主要问题是代码中的</script>结束标记。 它关闭您的块，而不是您要插入的块。

您必须这样做：

var myHtml = "<div id='tlkio' data-channel='regerhtrh' data-theme='theme--night' style='width: 100%; height:400px;'></div><script async src='https://tlk.io/embed.js' type='text/javascript'></scr"+"ipt>";

其次，使用innerHTML插入的script不会运行。 改用document.createElement('script')

UPDATE

这是jsFiddle： https ://jsfiddle.net/ArtyomShegeda/62fdybc0/21/

用div和脚本的另一个HTML代码块更改内部HTML

问题描述

2 个解决方案

解决方案1
0 2018-09-26 23:10:40

解决方案2
0 已采纳 2018-09-26 23:14:55

用div和脚本的另一个HTML代码块更改内部HTML

问题描述

2 个解决方案

解决方案1 0 2018-09-26 23:10:40

解决方案2 0 已采纳 2018-09-26 23:14:55

解决方案1
0 2018-09-26 23:10:40

解决方案2
0 已采纳 2018-09-26 23:14:55