0

I'm calling a third party script tag inside a div. This third party js renders an iframe & puts their content inside the div I put this tag into. However I see the iframe but the head & body of iframe does not have anything in it, Seems js is not getting executed properly & hence I cannot see the content inside the div. I can just see the iframe being generated & appended to the div but cannot see any content inside it. This is how I have placed the third party tag.( PS Basically the third party script tag pulls the value of property "abc" of object1 & executes. )

html file: 

< div id= "div2" style="display:none" >
< script >
 var object1 = {
    abc: "this is a fruit"
};
< /script>
<script type="text/javascript" src="thirdpartyjscode.js"></script>
< /div >

js file:

$('#div1').append($('#div2').show());

This code would show me div2 inside div1 but and the script inside div2 does get evealuated & I see iframe appended to div2 but I dont see any content inside it . Why would this happen? I don't get it. I read maybe using eval() would help but I'm not quite sure

This is what content looks like in the console after I do this & then I console logged "content"

var content = $('#div2').detach().html();
$('#div1').append('<div>', {
    id: 'div2',
    html: content
});

console.log(content) gives me the below .. But I dont see that iframe appended to the div2

          <script type="text/javascript">
                var object1 = {
                    abc: "this is a fruit"
                };
            </script>



 <script type="text/javascript" src="thirdpartyjscode.js"></script><iframe id="abc_61086936097182" src="" width="610" height="100%" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" style="display: block; height: 871px;"></iframe>
user229044
  • 232,980
  • 40
  • 330
  • 338
appleris
  • 3
  • 3

2 Answers2

1

Appending an existing DOM element to another element just moves the element in the DOM. Javascript is only executed when it's added to the DOM, not when it's just relocated within the DOM. If you want it to be executed, you need to make a copy:

var content = $('#div2').detach().html();
$('#div1').append('<div>', {
    id: 'div2',
    html: content
});
Barmar
  • 741,623
  • 53
  • 500
  • 612
  • I'll try your solution. Also, Is there anyway to just completely ommit the html code & put the whole code in the above html inside my file js directly? That way I wont have to hide() or show(). Do you know the correct way to do this? – appleris Oct 06 '14 at 16:35
  • I tried ur solution but It does not work. I dont see div2 appended to div1 – appleris Oct 06 '14 at 16:42
  • Rather. I see the div2 appended to div1 but it doesnt have the id name nor the script is getting executed. Dont see any content or iframe generated – appleris Oct 06 '14 at 16:49
  • I think there's something wrong with the function inside append – appleris Oct 06 '14 at 16:54
  • I have pasted what I get in the console above – appleris Oct 06 '14 at 17:03
0

appending HTML into the DOM does not cause the browser to evaluate any script tags in said appended HTML.

eval($("#div2").find("script").text());

How to execute <script> code in a javascript append

Community
  • 1
  • 1
Fabio
  • 1,890
  • 1
  • 15
  • 19
  • I tried ur solution but div2 does not get appended to div1 – appleris Oct 06 '14 at 16:45
  • Before of evaluate the scripts in div2 must append as your post $('#div1').append($('#div2').show()); and after you can evals – Fabio Oct 06 '14 at 17:23
  • yes I did that but it doesn't solve my problem. The ifrmae gets attched to div2 but I dont see any content inside it. It's just a blank box – appleris Oct 06 '14 at 17:30
  • both body and head are blank – appleris Oct 06 '14 at 17:52
  • Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened. – appleris Oct 06 '14 at 17:54
  • http://stackoverflow.com/questions/24297829/execute-write-on-doc-it-isnt-possible-to-write-into-a-document-from-an-asynchr – Fabio Oct 07 '14 at 06:38