Yes, I know an iFrame has difficulties with inserting files. I need this worked out, please.
I have an iFrame call my JS file, which should try to append a script tag (to call jQuery). It’s appending it to my parent page. How can I get it into my iFrame page, where I’m calling the JS file? Googled for a few solutions, but none worked.
var myIframe = document.getElementById("iFrameResizer0");
var script = myIframe.contentWindow.document.createElement("script");
script.type = "text/javascript";
script.src = "https://code.jquery.com/jquery-1.11.3.min.js";
myIframe.contentWindow.document.body.appendChild(script);
If you run the JavaScript from the iframe page then that’s where it should append the code. If you run it from outside the iframe then the code will be added outside the iftame.
You can only communicate between the main page and the iframe if they are on the same domain or by sending messages from one and listening for message events on the other (which requires JavaScript specific to the communication to be loaded on both domains).
Unless the JavaScript on both domains is set up to allow messages to be passed, JavaScript has no cross domain access.
then referencing the iframe from the main page just needs the iframe name on the front and referencing the parent from the iframe just needs parent. on the front.
Thanks, but this is not an option. I need this called from the iframe, not from the parent page. Our setup blocks the JS once we go live. There’s no point trying to get around this.
and here is the body of the test page within the IFrame:
<body>
<p>This is a test</p>
<script type="text/javascript">
var elem=document.createElement("script");
elem.setAttribute("type","text/javascript");
document.head.appendChild(elem);
elem.innerHTML="alert('This is a test')";
</script>
</body>
You can put any script you like in the test page. This example shows the scripted alert() as soon as the page loads.
This works for all browsers but only to IE9 and above.
I may have misunderstood what Ryan is after. I thought is was about having the page that contains the iframe writing to the page contained in the iframe.
The code I posted previous does that
I had been working with it in “file” protocol but I had to move it to my localhost server to test it with the “http” protocol.
It had worked OK in Firefox, Edge, and Opera 12, but Chrome and Vivaldi squawked until I moved it.
Uncaught SecurityError: Blocked a frame with origin “null” from accessing a frame with origin “null”. Protocols, domains, and ports must match.
<body>
<h1>Iframe Test Page</h1>
<iframe id="test_iframe" src="template.html" width="1100" height="500"></iframe>
<script type="text/javascript">
// script that needs the DOM to be loaded here
function init() {
var my_iframe = parent.document.getElementById("test_iframe");
var iframe_head = my_iframe.contentWindow.document.getElementsByTagName("head")[0];
var script_elem = document.createElement('script');
script_elem.textContent = "alert('hello iframe')";
iframe_head.appendChild(script_elem);
}
window.onload = function() {
init();
};
</script>
</body>
the template.html page I put into the iframe is a simple bare-bones HTML5 file in the same folder as the test file
Hmm Ok I guess the style issue was just something ewird from yesterday.
Your code seems to work. Question though. I have this
function init() {
var my_iframe = parent.document.getElementById("iFrameResizer0");
var iframe_head = my_iframe.contentWindow.document.getElementsByTagName("body")[0];
var script_elem = document.createElement('script');
script_elem.src= "https://code.jquery.com/jquery-1.11.3.min.js";
iframe_head.appendChild(script_elem);
}
window.onload = function() {
init();
$('#form_43').each( function() {
$(this).contents().find('input').attr("required",
"true");
});
};
Is loading in a script like this giong to load in jQuery? I ask because my jQuery doesn’t seem to be running. I still get $ is not a function() (error). That tells me jQuery isn’t loaded even though I wait until window load to run.
