使用div和脚本的另一个HTML代码块更改内部HTML
使用div和脚本的另一个HTML代码块更改内部HTML
提问于 2018-09-27 06:44:44
我一直在努力解决这个问题，希望有人能帮上忙！因此，当我的框架从页面代码接收消息时，我希望将段落的内部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>回答 2
Stack Overflow用户
回答已采纳
发布于 2018-09-27 07:14:56
主要问题是代码中的</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')
更新
Stack Overflow用户
发布于 2018-09-27 07:10:40
您可以考虑交换使用的引号：
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);
}基于这里的一些研究：load scripts asynchronously，最好将脚本附加到<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52526986
复制相关文章
相似问题