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

Question

I have been struggling with this so hopefully someone can help! 我一直在努力，希望有人可以提供帮助！ So I am looking to change the inner html of a paragraph to another html element containing a div and script when my frame receives a message from the page code. 因此，当我的框架接收到来自页面代码的消息时，我希望将段落的内部html更改为另一个包含div和脚本的html元素。 I have this working only for when the inner html is set to replace with a normal string like this 我只有在内部html设置为用这样的普通字符串替换时才有效

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

the correct replacement shows up here 正确的替换显示在这里

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

but when I try and pass in the other html to replace that section like this: 但是当我尝试传递其他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>';

it does not work. 这是行不通的。 I don't think it is a quotation issue because I wrapped the outsides of it with single quotes. 我认为这不是报价问题，因为我在外面用单引号引起来。 not sure what else to try. 不知道还有什么尝试。 Below is the full html and I would appreciate any help! 以下是完整的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

You may consider swapping the Quotes used: 您可以考虑交换使用的报价：

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

This may add it, yet may not render it. 这可能会添加它，但可能无法渲染它。 You might consider creating the elements and appending them. 您可以考虑创建元素并附加它们。

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

Based on some research here: load scripts asynchronously , it may be best to append the script to the <head> . 根据此处的一些研究：异步加载脚本，最好将脚本附加到<head> 。

Hope that helps. 希望能有所帮助。

Update 1 更新1

Per your fiddle, once updated, it is working as you suggested: https://jsfiddle.net/Twisty/62fdybc0/7/ 根据您的提琴，一旦更新，它就会按照您的建议工作： https : //jsfiddle.net/Twisty/62fdybc0/7/

The following is added to #myDIV element: 将以下内容添加到#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

The major issue is the </script> closing tag in your code. 主要问题是代码中的</script>结束标记。 It closes YOUR block, not the block you are inserting. 它关闭您的块，而不是您要插入的块。

You have to do so: 您必须这样做：

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

Second, script you insert with innerHTML wont run. 其次，使用innerHTML插入的script不会运行。 Use document.createElement('script') instead 改用document.createElement('script')

UPDATE UPDATE

Here is the jsFiddle: https://jsfiddle.net/ArtyomShegeda/62fdybc0/21/ 这是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