I have the following code:
<html>
<head>
</head>
<body>
<script type="text/javascript">
var frame = document.createElement('iframe');
frame.id = 'myFrame';
document.getElementsByTagName('body')[0].appendChild(frame);
var context = frame.contentWindow.document;
context.body.innerHTML = 'testing';
</script>
</body>
</html>
This creates a simple iframe containing my text: 'testing'.
This works perfectly in Chrome, but Firefox and IE are rendering an empty iframe.
Any idea what I'm doing wrong?
You can do something like this:
var frame = document.createElement('iframe');
frame.id = 'myFrame';
document.getElementsByTagName('body')[0].appendChild(frame);
frame = (frame.contentWindow) ? frame.contentWindow : (frame.contentDocument.document) ? frame.contentDocument.document : frame.contentDocument;
frame.document.open();
frame.document.write('testing');
frame.document.close();
Javascript is interpreted differently by all browsers, so it's just a matter of using the common-approach. This should work across all browsers.
Give it a try.
Some browsers explicitly prevent things like this so you can't, e.g., load somebody's bank website in a frame and interact with it in Javascript. This link:
http://spyder.wordpress.com/2006/05/31/hacking-around-firefox-security-in-order-to-actually-accomplish-something/
suggests that there are some bugs with how an empty iframe is initialized, and this one:
http://www.iframehtml.com/iframe-security.html
has some resources for how to deal with them.
Rewrote the last line innerHTML seems like a chrome only thing.
<script type="text/javascript">
var frame = document.createElement('iframe');
frame.id = 'myFrame';
document.getElementsByTagName('body')[0].appendChild(frame);
var context = frame.contentWindow.document;
context.write('testing');
</script>
JS fiddle here confirms it's working in IE, Chrome and Firefox:
http://jsfiddle.net/thebeebs/mDMaj/
Related
I try to generate src attribute for the iframe on the fly doing this:
var iframe = document.createElement('iframe');
var html = '<html> <head></head> <body></body> </html>';
var eventListener = '<script>window.addEventListener("message", someListenerFunction)</script>';
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html) + encodeURI(eventListener);
iframe.sandbox = 'allow-scripts';
This actually works fine in chrome/firefox/safari, but it doesn't work with ie11. Inside the iframe window it returns:
Cannot display the webpage
And in the console I get the error:
SCRIPT5: Access is denied.
File: unknowprotocol.htm, Line:1, Column:1
The problem I think in the encoded URI address.
The reason I do this - I need to generate lots of iframes and I don't want to create a static webpages for each of them.
Hope for your help. Thank you in advance.
Here is my code:
if (jQuery.browser.msie && !jQuery.browser.version == 9) {
}else{
var myVideoFrame = document.getElementById("myVideoFrame");
myVideoFrame.textTracks[0].mode = "hidden";
}
I am using JW Player but as I need my videos and video contents make indexable by search engines I created html5 video tag with source and track tags in it and implemented JW player setup javascript code on existing video id. In this case I needed to hide existing tracks cause I see double subtitles. Via code above it is hidden everywhere except IE 9 and gives me this error. Please see attached image. How can I hide tracks for IE9 ?
I found this article and added code written below:
<script type="text/javascript">
var ie9 = false;
</script>
<!--[if IE 9]>
<script>
ie9 = true;
</script>
<![endif]-->
<script type="text/javascript">
if (ie9 == false) {
var myVideoFrame = document.getElementById("myVideoFrame");
myVideoFrame.textTracks[0].mode = "hidden";
}
</script>
Now this code works in every browser except IE9. So no error in console.
I have googled as much as I can and I'm not sure of the support for the document of an iframe getting the id of itself in the parent window: window.frameElement.id. There are so many browsers that it's hard to test them all and nothing online seems to have any information. I'm specifically wondering about:
Safari
iOS Safari
Windows Phone IE
IE 7, 8, 9, 10, 11
(I tested Firefox and Chrome and they both worked).
EXAMPLE IFRAME CONTENT
<!DOCTYPE HTML>
<html>
<head></head>
<body>
<script type="text/javascript">
var owner = window.frameElement;
var thisIsWhoIsCalling = ( owner !== null ) ? owner.id : null;
window.parent.SomeJavaScriptObject.someFunction( thisIsWhoIsCalling );
</script>
</body>
</html>
I happened to look for the same information.
Here's what I have found.
https://developer.mozilla.org/en-US/docs/Web/API/Window.frameElement
I have tested some browsers in addition to the MDN doc, and confirmed that it is supported by IE7+, Safari, Firefox, Chrome. So pretty much all browsers.
I haven't tested on IE6-, but I guess you don't need to care.
var frame = window.frameElement; //Get <iframe> element of the window
if (frame) { window.location.href = "/403.shtml"; ...
This code not working for me in cross browser (FF,Chrome,IE)
A prefer this one, working ok and cross browser...
if (window.self === window.top) window.location.href = "/403.shtml";
//or if (window.self !== window.top) window.location.href = "/403.shtml";
I am developing a Web 3D app and I produced some code in Javascript that implements the following tag to an external .html file with the model in it, within an iframe.
In the <appearance> element in the X3D code block of the external .html file:
<texture id="XXX" repeats="true" repeatt="true" url="" scale="true"
hidechildren="true">
<img src="" attr=".../BMW.jpg" style="display: none; visibility: hidden;">
</texture>
Javascript code that places the above code in the appropriate block in the iframe after I click on a button:
ogl = true;
function toggleTexture(){
if (!ogl) {
var t = document.createElement("Texture");
t.setAttribute("id", "XXX");
t.setAttribute("repeatS", "true");
t.setAttribute("repeatT", "true");
var imgElement = document.createElement("img");
imgElement.setAttribute("src", "../HomeFurniture/assets/BMW.jpg");
t.appendChild(imgElement);
var iframe = document.getElementById("frame");
var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;
innerDoc.getElementById("anApp").appendChild(t);
innderDoc.x3dom.reload();
} else {
var iframe = document.getElementById("frame");
var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;
var ot = innerDoc.getElementById("anApp");
ot.removeChild(innerDoc.getElementById('XXX'));
}
return false;
}
The result in the debugging of Chrome browser shows that the piece of code needed is inserted, but the actual model is not updated with the appropriate texture.
There must be something that I miss, but I cannot find the solution. Any help would be appreciated.
FIXED: The problem was Google Chrome. I tested the Web app in Mozilla Firefox and everything works :)
Additionally, I tried the Javascript code in the child html file and it works in Chrome. It just refuses to work when the parent html file load the child html file within an iframe block.
I got a iframe and I want to select a canvas element in this iframe. But it doesn't work. I'm using the following code.
This is my iframe
<body>
<div id="canvasdiv" width="300" height="300"></div>
</body>
This is my parent page
<iframe name="iframe" id="iframe" frameborder="0" width="325" height="325" src="..."></iframe>
With javascript I add a canvas with some properties. For example the id.
canvas.node.id = "canvas";
In my parent page I got the following javascript.
var iframe = document.getElementById("iframe");
alert(iframe);
var iframe_canvas = iframe.contentDocument || iframe.contentWindow.document;
alert(iframe_canvas);
var canvas = iframe_canvas.getElementById("canvas");
alert(canvas);
Result:
iframe = iframe element
iframe_canvas = html element
canvas = null
Does somebody know why I can't access the canvas element? =(
I'm sorry, but I solved the problem. Thanks for all the replies. =)
To test the getElementById function I called it by $(document).ready. But at this time the iframe wasn't rendered by the browser. That's why I could access the iframe it self but not the elements of the iframe. Now I assigned the function to a button and it works.
According to your HTML, this line of code:
var canvas = iframe_canvas.getElementById("canvas");
should be this to target the proper id value in your div:
var canvas = iframe_canvas.getElementById("canvasdiv");
You're omitting the code that adds the <canvas> element itself. Are you sure its id is canvas?
If you are, then you might be running into same-origin policy problems regarding accessing contents of iframes.
your code is fine expect for one part.
replace
getElementById("canvas")
with
getElementById("canvasdiv");