I'm trying to append html inside the <head>
tag of an iframe I'm creating, but instead of appending to my iframe's head, my code is being appended to the head of the actual page I'm on. I have no idea why that's happening!
Here's what I've tried:
$('body').append('<iframe src="/test-iframe.html" id="if"></iframe>');
$('#if').ready(function(){
$('head', window.frames['if'].document).append('<scr'+'ipt src=/script.js></scr'+'ipt>');
});
And I also tried this:
$('body').append('<iframe src="/test-iframe.html" id="if"></iframe>');
$('#if').ready(function(){
$('#if').contents().find('head').append('<scr'+'ipt src=/script.js></scr'+'ipt>');
});
But in both cases the result ends up looking something like:
<html>
<head>
<script src="/script.js"></script>
</head>
<body>
<iframe src="/iframe-test.html">
<html><head></head><body>test page</body></html> <!-- This is the source of the iFrame after it loaded, obviously -->
</iframe>
</body>
</html>
As you can probably see it has indeed appended my script tag to the wrong <head>
tag.
How can I make it so it DOES append to the <head>
tag inside of my iFrame?