Change the inner HTML with another HTML code block of a div and a script

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. I have this working only for when the inner html is set to replace with a normal string like this

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:

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!

<!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>

And you are missing a source for .onmessage check W3School https://www.w3schools.com/jsref/event_onmessage_sse.asp — Vash72, Sep 26 '18 at 23:15

Twisty · Answer 1 · 2018-09-27T02:25:53.493

0

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>.

Hope that helps.

Update 1

Per your fiddle, once updated, it is working as you suggested: https://jsfiddle.net/Twisty/62fdybc0/7/

The following is added to #myDIV element:

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

edited Sep 27 '18 at 02:25

answered Sep 26 '18 at 23:10

Twisty

30,304
2
26
45

this seems like it would work but I am not getting it to work somehow. can you take a look at this fiddle https://jsfiddle.net/62fdybc0/ – mattylight Sep 27 '18 at 02:13
@mattylight in your fiddle, there is no element with the ID of `head`, so there is nothing to append to. – Twisty Sep 27 '18 at 02:19
you are right, sorry. Even with changing that to myDIV. I can tell it creates the div, but the script does not run still. I updated the fiddle to show https://jsfiddle.net/62fdybc0/9/ – mattylight Sep 27 '18 at 02:26
@mattylight as has been mentioned by myself and others, this might be due to CORS or other Browser related security that is specifically designed to prevent external JavaScript code from being executed in the browser. the ` – Twisty Sep 27 '18 at 02:34
got it, thats probably what is going on. I really appreciate your help! Thanks again ! – mattylight Sep 27 '18 at 02:39
@mattylight take a look here too: https://humanwhocodes.com/blog/2009/07/28/the-best-way-to-load-external-javascript/ – Twisty Sep 27 '18 at 02:39
I took a look at that article and realized that I may be approaching this whole thing wrong. The reason I was exploring this is because I want to load a different channel of this chat script each time I load a page so the div attribute of the data channel (yyyy) in this example is `
– mattylight Sep 27 '18 at 13:58

Artyom Shegeda · Accepted Answer · 2018-09-27T14:42:38.557

0

The major issue is the </script> closing tag in your code. 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. Use document.createElement('script') instead

UPDATE

Here is the jsFiddle: https://jsfiddle.net/ArtyomShegeda/62fdybc0/21/

edited Sep 27 '18 at 14:42

answered Sep 26 '18 at 23:14

Artyom Shegeda

313
1
7

Thanks for the reply. I am still not getting it to work, can you take a look at this fiddle please? I am using document create but not sure what I am doing wrong https://jsfiddle.net/62fdybc0/9/ – mattylight Sep 27 '18 at 02:29
thanks for your help! as shown with the other answers on this forum, that solution works, but the script does not load as it should I think due to CORS or other Browser related security. It should show something like this https://jsfiddle.net/2g71a9pq/1/ in the end. The reason I was exploring this is because I want it to load a different channel of this chat script each time I load a page so the parameter in the data channel (x) `
– mattylight Sep 27 '18 at 13:51
@mattylight, i updated the code. it is not CORS issue. it does not work because of it was designed for page load-time initialization, not interact-time. i made two important changes: (1) i added onload event handler to track script load and in this handler i force 'load' event for window, (2) you forgot to use id="tlkio" attribute for placeholder. – Artyom Shegeda Sep 27 '18 at 14:46
thank you so much! this is exactly what I needed. I really appreciate it! – mattylight Sep 27 '18 at 14:51

Change the inner HTML with another HTML code block of a div and a script

2 Answers2