我一直在努力解决这个问题,希望有人能帮上忙!因此,当我的框架从页面代码接收消息时,我希望将段落的内部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>
发布于 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')
更新
发布于 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>
https://stackoverflow.com/questions/52526986
复制相似问题