I am currently using Ace (http://ace.c9.io/) to take code from an editor and execute it within an iFrame. My issue is that when I add something along the lines of
Code in Editor
<script type="text/javascript">
window.onload = function() {
alert("hello");
}
</script>
to the head or body of the iFrame, the code is never executed. This is my current code:
Injecting Code into iFrame
$("#btnRun").click(function(event) {
event.preventDefault();
// iFrame with id="preview"
var preview = $("#preview").contents();
// Get code from editor and wrap in <script> tags
var script = "<script type='text/javascript'>" + ace.edit("js-editor").getSession().getValue() + "</script>";
// Append code to head or body, in this case head
preview.find("head").append(script);
});
The code is successfully added to the iFrame, however it is never executed. I can also successfully add HTML/CSS and it displays in the iFrame, but the javascript is never touched.
I have tried wrapping the code in script tags within the editor only, as well as using an escape character on the closing tag: "</script>" but to no avail.
This is the iFrame in my index.html document.
iFrame in index.html
<iframe class="editor" id="preview" name="result" sandbox="allow-forms allow-popups allow-scripts allow-same-origin" frameborder="0">
#document
<!-- Editor content goes here -->
</iframe>
After the code is injected the iFrame looks like this
iFrame with Injected Code
<iframe class="editor" id="preview" name="result" sandbox="allow-forms allow-popups allow-scripts allow-same-origin" frameborder="0">
#document
<html>
<head>
<script type="text/javascript">
window.onload = function() {
alert("hello");
}
</script>
</head>
<body>
</body>
</html>
</iframe>
Also when calling the window.onload or window.top.onload event from within the iFrame, the code executes but only affects the page containing the iFrame and not the contents of the iFrame itself.
Thank you.
Note: When the code is not within window.onload it runs fine. However I wish to be able to execute this code when the frame's onload function is executed.
I would think that you are adding the JS to the iframe after the onload event has already fired.
Perhaps you could try simulating an event to run the preview code or dispatching the onload event again?
Might help: https://developer.mozilla.org/en-US/docs/Web/API/Window.dispatchEvent
I was able to fix this myself. The problem was that appending the script to be within the iFrame wasn't enough to make it work. To make the script only be executed within the iFrames DOM was to write directly to it.
$("#btnRun").click(function(event) {
event.preventDefault();
var previewDoc = window.frames[0].document;
var css = ace.edit("css-editor").getSession().getValue();
var script = ace.edit("js-editor").getSession().getValue();
var html = ace.edit("html-editor").getSession().getValue();
previewDoc.write("<!DOCTYPE html>");
previewDoc.write("<html>");
previewDoc.write("<head>");
previewDoc.write("<style type='text/css'>" + css + "</style>");
previewDoc.write("<script type='text/javascript'>window.onload = function() {" + script + "}</script>");
previewDoc.write("</head>");
previewDoc.write("<body>");
previewDoc.write(html);
previewDoc.write("</body>");
previewDoc.write("</html>");
previewDoc.close();
});
I think it would be more elegant to use the contentDocument property of the iframe, and then inject the script and trigger the parser so it actually interprets it as JavaScript.
I put up a small proof of concept on github. I hope it solves your problem in a more elegant manner.
https://github.com/opreaadrian/iframe-injected-scripts
Cheers,
Adrian.
Related
Here is code, stuck with that simple issue which I never have had in past 7 years:
<html>
<body>
<iframe></iframe>
<script>
window.frames[0].document.write('<scr' + 'ipt type="text/javascript" src="//code.jquery.com/jquery-3.0.0.min.js"><\/scr' + 'ipt>');
</script>
</body>
</html>
The problem is that browser's spin wheel continue to circle.
Network console shows all loaded.
If I remove iframe from DOM, or add/change #src attribute - loading stops.
I believe the first answer is the better way, but I'll provide a second answer that is almost identical to your code, but shows how calling document.close() would have also solved your issue.
The issue is that you've started writing to the document's <head> element in the iFrame, but not finished (that's why the page keeps loading). Calling document.close() signals that you've finished writing to the document.
<html>
<body>
<iframe></iframe>
<script>
var doc = window.frames[0].document
doc.write('<scr' + 'ipt type="text/javascript" src="//code.jquery.com/jquery-3.0.0.min.js"><\/scr' + 'ipt>');
doc.close();
</script>
</body>
</html>
Actually, I've just found solution that works if you have control on inner script (doesn't help with loading 3rd party like jQ though).
You should close "current stream" with document.close().
Looks like firefox might have some weirdness around iframes
<html>
<body>
<iframe></iframe>
<script>setTimeout(function(){window.frames[0].document.write("hi");}, 5000);</script>
</body>
</html>
This results in a spinner that starts 5 seconds after page load and doesn't go away (at least on my computer - firefox 47.0)
Try just:
window.frames[0].document.write('<script type="text/javascript" src="//code.jquery.com/jquery-3.0.0.min.js"><\/script>');
I checked on JSbin and it works ok.
Example page
Update:
I think it cannot work because that iframe doesn't even have any document in it. it's just an empty tag until it has a working src and is populated.
See demo
Anyway, this can only work if the content of the iframe is on the same domain (google "cross-origin iframes"). There is a "race" going on here. you want to load jQuery so the page your are loading would use it, but you cannot load any script from the outside of the iframe to the inside until the page has loaded inside the iframe...
I was able to insert the script without the loading issue you describe by defining and appending the element in Javascript, without any loading issues.
<html>
<body>
<iframe id="myFrame"></iframe>
<script>
var jq = document.createElement('script')
jq.type = 'text/javascript'
jq.src = '//code.jquery.com/jquery-3.0.0.min.js'
document.getElementById('myFrame').contentDocument.getElementsByTagName('body')[0].appendChild(jq);
</script>
</body>
</html>
Of course, changing body to head will change where the script loads in the iFrame.
May use the onload
function populateIFrame() {
const str = `<body></body>`;
const idoc = document.getElementById("demo01")
idoc.contentDocument.write(str)
idoc.close();
}
window.onload=populateIFrame
I have a page which contains another page embedded inside an object tag.
Now I want to call a javascript function from the "parent"-page. To be specific: The parent page wants to call a function, which resides inside the embedded code.
Former I used iframes but they caused some nasty bugs with Firefox, so I don't want to use them anymore.
Edit:
So, my question is: what would be the best way to achieve this, when using an object tag?
Here's some example to illustrate what I want to do:
I have a HTML page "parent.html" inside this page there is some Javascript inside a tag. This parent.html also has an tag and the src of this tag is another HTML page, let's call it child.html. The child.html page has something like:
Here's some pseudo code:
in Child.html:
<script type="text/javascript" src="child.js"></script>
in Child.js:
function getSomething(){
return something;
}
in Parent.html:
<object id="childObject" data="child.html" width="850" height="510">
</object>
<script>
// Here I want to access the function from the child.js
// I tried something like this, but it doesn't work:
var something = document.getElementById('childObject').contentDocument.getSomething();
</script>
Now:
In the Javascript inside the parent.html I need to call a function from the child.js.
How can I achieve this?
Thank you :)
Using contentWindow instead of contentDocument works for me:
<object id="childObject" data="child.html" width="850" height="510">
</object>
<script>
var something = document.getElementById('childObject').contentWindow.getSomething();
</script>
You Can try This
<object id="childObject" data="child.html" width="850" height="510">
<script>
var something = document.getElementById("childObject").parentElement.getSomething();
</script>
I have endlessly tried to open iframe links inside either the parent tab or a new tab however I just can't seem to get them to work. When I set the links to target="_parent" the links do nothing and when I set the links to target="_blank" they open in a new tab but also display nothing.
As soon as I get rid of the code that adds the target to the links they work but open inside the iframe which is not what I am trying to accomplish. Any help would be greatly appreciated.
Here is the iframe code that I am using:
<iframe src="js/eventsFrame2.php?EventID=2422308" id="frameclass" frameborder="0" scrolling="no" width="100%" height="600">
Here is the code inside the iframe:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function myFunction() {
$("a").attr('target','_parent');
}
$(window).load(myFunction);
</script>
<script language="javascript" type="text/javascript">
document.write('<script language="javascript" src="http://tickettransaction.com/?bid=1761&sitenumber=18&tid=ticket_results&evtid=2422308"><\/script>');
</script>
If you have control over the content inside the iframe, you could try using the base tag.
Example -- In the page loaded into the iframe include a base tag within the head:
<base target="_top"/>
Have you tried overwriting the parent page (containing the iframe) with your content?
Code inside the iframe:
<script language="javascript" type="text/javascript">
parent.document.write('<script src="http://tickettransaction.com/?bid=1761&sitenumber=18&tid=ticket_results&evtid=2422308"><\/script>');
</script>
Query defines the contents() method to grab the document node, but it doesn't give you a cross-browser way to go from the document to the window, so you're still stuck with:
var iframea = $('iframe').contents().find("a");
iframea.attr('target','_parent');
IMPORTANT: you should always check that the document is with the status "complete" for work with this
var iframe= document.getElementById('iframe_id');
//var iframewindow= iframe.contentWindow
//? iframe.contentWindow : iframe.contentDocument.defaultView;
var preview = previewFrame.contentDocument || previewFrame.contentWindow.document;
if (preview.readyState=="complete")
{
//ok
}
else
{
//perform a recursive call until it is complete
}
I'm trying to create an external link, that appears within the same site.
Here, If I click on a link it should display the contents of that link(external site) within our site. i.e., if my site is siteA and in that I place a link (to siteB) that will redirect to 'siteB' closing 'siteA'. I just want to avoid the situation besides I want to make the siteB to be opened within the siteA
My idea is when the link is opened, an iframe will be created and the external site will be opened within that Iframe.
Google
<script type="text/javascript">
function executeOnClick(){
<iframe name="your_frame_name" src="www.google.com" > </iframe>
return true;
}
</script>
I wrote this code, but couldn't get what I expect. I tried to use button, but it's not working.
Is there any other way to fix my issue..
No javascript is needed, use target attribute:
Load the page
<iframe id="iframe1"> </iframe>
JSFiddle
IMPORTANT: you cannot display http://google.com in iframes because of their X-Frame-Options. See: The X-Frame-Options response header
function executeOnClick(){
$('body').append('<iframe name="your_frame_name" src="www.google.com" height=200 width=200 > </iframe>');
return true;
}
try this
The iframe markup should not be inside your JavaScript function. That does nothing except throwing an exception. Put the markup below your anchor and change its src on click:
Google
<iframe id="targetFrame"></iframe>
<script>
function executeOnClick(target) {
document.getElementById("targetFrame").src = target.src;
return false;
}
</script>
In fact you don't even need JavaScript to do this. You can use the target attribute of the anchor and set it to be the name of the frame you want to open the page in:
Google
<iframe name="targetFrame" id="targetFrame"></iframe>
Change to this:
onclick="executeOnClick(this); return false;"
and do this in your funcition:
<script type="text/javascript">
function executeOnClick(elem){
var frame = '<iframe name="your_frame_name" src="'+ elem.getAttribute('href') +'" > </iframe>';
document.body.appendChild(frame); // <----append it here.
}
</script>
In your onclick function you have to return false; to stop the default behaviour of an anchor to take you to the another page.
please note that the google.com will not work with iframe
Google
<iframe id="targetFrame"></iframe>
<script>
function executeOnClick(src) {
document.getElementById("targetFrame").src =src;
}
</script>
<iframe src="www.google.com" height="400" width="551" frameborder="0" scrolling="no" runat="server"></iframe>
Use runat attribute too. Hope this works.
If doesn't, what's the error?
I have the following HTML / JS:
<html>
<body>
<script>
function foo(){
var html = "<iframe src=\"foo.html\" />";
document.getElementById('content').innerHTML=html;
}
function bar(){
var html = "<iframe src=\"bar.html\" />";
document.getElementById('content').innerHTML=html;
}
function show(){
alert(document.getElementById('content').innerHTML);
}
</script>
<button onclick="foo()">foo</button><br />
<button onclick="bar()">bar</button><br />
<button onclick="show()">test</button><br />
<div id="content"></div>
</body>
</html>
This sort of works as expected, even in IE. Until I hit F5. When I first click foo, I get an iframe with the contents of foo.html, as expected. I then refresh, and hit bar. Instead of getting the contents of bar.html, I see the contents of foo.html. Strangely, when I click test, the alert() tells me the src attribute for the iframe is correctly set to bar.html. Firefox has no such issue.
Why does this happen, and how do I prevent it?
edit: what I forgot to mention is that I can't put the iframe in and change the src attribute. In the real situation I have, sometimes I need an <img> rather than an <iframe>.
Use this DOM
<div id="content" style='display:none;'>
<iframe id='contentFrame' src='' />
</div>
And this as your script
function foo() {
var contentDiv = document.getElementById('content');
var contentFrame = document.getElementById('contentFrame');
contentFrame.src = 'foo.html';
contentDiv.style.display='block';
}
I have noticed some weird behavior with IE and using innerHTML. I would only use it to clear the contents (innerHTML = ""). If I want to add anything, I use HTMLElement.appendChild(); it hasn't failed for me yet.
Have you tried changing the url in your generated iframe?
E.g.
var randomNum = Math.random();
var html = "<iframe src=\"bar.html?rand="+randomNum+"\" />";
Even better, combine that with geowa4's appendChild() suggestion.
Set the SRC of the Iframe instead of changing the innerHTML of its container:
html:
<iframe id="myFrame" src="about:blank" />
script:
document.getElementById('myFrame').src='foo.html'