I want to add and remove an iframe to a document using javascript / jquery (actually the iframe should be added and also removed if the user chooses to close it).
In this iframe, I have to include an external script using the element, script that contains basically generated content displayed using document.write (ad rotator).
The problem I have is that when the iframe is loaded, the element is included but its content is not "interpreted", so that the content is not write with document.write.
I don't know what I am missing here.
Here is what I tried (inspired from other answers on SO):
html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery-10.2.js"></script>
<script src="frame.js"></script>
</head>
<body>
<div>Some content</div>
<div id=myFrameContainer></div>
</body>
</html>
frame.js:
$(document).ready(function(){
$('<iframe></iframe>', {name:"myFrame",id:"myFrame"})
.css("height", 300)
.css("width", 500)
.load(function() {
$(this).contents().find("body")
.append('<scr' + 'ipt type="text/javascript" src="http://example.com/rotator.php?affid=12345"></scr' + 'ipt>');
}).appendTo("#myFrameContainer");
});
I also tried to append the element to the head and also without any success.
On top of this, I can see the content generated by the external script in Firebug (but maybe this is totally normal and has nothing to do with my question).