I am trying to insert an iframe into the browser DOM via javascript and want to remove the border if IE but can't seem to. I have tried these to no avail:
iframeElement.style.borderStyle="none";
and
iframeElement.style.frameBorder = "0";
Any suggestions will be much appreciated.
Bizarrely, I was looking for an answer to this very issue myself earlier today. I found that setting the frameBorder to 0 property does work, so long as you do it before the iframe is added to the document.
var iframe = document.createElement("iframe");
iframe.frameBorder = 0;
document.body.appendChild(iframe);
The frameBorder attribute exists directly on the iframe element, is not a CSS property.
Try with:
iframeElement.frameBorder = 0;
Try this. It will find any iframe elements and remove their borders in IE and other browsers (though you can just set a CSS style of "border : none;" in non-IE browsers instead of using JavaScript). AND it will work even if used AFTER the iframe is generated and in place in the document (e.g. iframes that are added in plain HTML and not JavaScript)!
This appears to work because IE creates the border, not on the iframe element as you'd expect, but on the CONTENT of the iframe--after the iframe is created in the BOM. ($#&*##!!! IE!!!)
Note: The IE part will only work (of course) if the parent window and iframe are from the SAME origin (same domain, port, protocol etc.). Otherwise the script will get "access denied" errors in the IE error console. If that happens, your only option is to set it before it is generated, as others have noted, or use the non-standard frameBorder="0" attribute. (or just let IE look fugly--my current favorite option ;) )
Took me MANY hours of working to the point of despair to figure this out...
Enjoy. :)
// =========================================================================
// Remove borders on iFrames
if (window.document.getElementsByTagName("iframe"))
{
var iFrameElements = window.document.getElementsByTagName("iframe");
for (var i = 0; i < iFrameElements.length; i++)
{
iFrameElements[i].frameBorder="0"; // For other browsers.
iFrameElements[i].setAttribute("frameBorder", "0"); // For other browsers (just a backup for the above).
iFrameElements[i].contentWindow.document.body.style.border="none"; // For IE.
}
}
Try iframeElement.style.borderCollapse = 1; or iframeElement.style.borderWidth = 0;
You should also be able to use 'conditional comments' in the HTML so as to include the 'frameborder' attribute only in IE8:
<!--[if IE 8]>
<iframe id="my-iframe" frameborder="0"></iframe>
<![endif-->
<!--[if gt IE 8]><!-->
<iframe id="my-iframe"></iframe>
<!--<![endif]-->
Related
The purpose of my code is to make visible a div that has the same id that the select option I've chosen. But there is more stuff. The div to make visible has an iframe that has to be resized fitting the content. Each iframe contains an Excel sheet (in htm extension). I paste all of my code, including resizing function. That works perfectly on Chrome and Opera, but it doesn't run well on IE and FF.
The problem appears when i select a new div. In Chrome and Opera i see the new iframe properly resized when i change the select option, but in IE and FF i can't see anything. I've checked that the display propierty of the div i've selected is set to block, cause it may be a problem of jQuery or Resize function.
I spent a lot of time trying to fix it, but i still find the solution.
There is my code:
CSS:
#sheetsContainer div{display: none;}
HTML:
<select id="sheets">
<option value="sheet1">Sheet 1</option>
<option value="sheet2">Sheet 2</option>
</select>
<div id="sheetsContainer">
<div id="sheet1">
<iframe frameborder="0" onload='javascript:resizeIframe(this);' src="indicadors/2014/1_3_4.htm"></iframe>
</div>
<div id="sheet2">
<iframe frameborder="0" onload='javascript:resizeIframe(this);' src="indicadors/2014/1_3_4_183.htm"></iframe>
</div>
</div>
JS/jQuery:
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
obj.style.width = "100%";
}
$("#sheets").change(function(){
$("#" + this.value).show().siblings().hide();
});
$("#sheets").change();
This is a test, since my real purpose is to use bootstrap's tab panel instead of the dropdown select. I wanted to minimize the problem to make it more intelligible to you. In fact, with Chrome and Opera bootstrap's tabs also work, but it doesn't with IE and FF.
Thanks all for your help!
EDIT:
With FF and IE I can see only the first div of the selector. When I switch to another div I can't see anything, but if i switch again to first div I can see it propely. In my code, i can see 'sheet1' but I can't see 'sheet2'. If i refresh the page with 'sheet2' selected, now i can see sheet2, but if I switch to sheet1 i can't see nothing.
You can see what i have at https://gpaq.upc.edu//lldades/2014/indicador.asp?index=1_3_4 . Compare it with Chrome and FF to see the problem ;)
For Firefox, you need to give it a bit of time to load the iframe. Here is the recommendation:
function resizeIframe(obj) {
setInterval(function(){resizeIframeNow(obj);},3000); // wait around 3 seconds
}
function resizeIframeNow(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight;
obj.style.width = "100%";
}
I would prefer removing the + 'px' after scrollHeight.
As for IE, I would recommend calling the resize function from the HTML content of the iframe by using the window.frameElement (iframe parent) object towards the end of the HTML in your case maybe 1_3_4_183.html:
....
<script>
var h = document.getElementsByTagName("body")[0].scrollHeight + 30; // add 30 to prevent scrollbar from appearing
window.frameElement.height=h;
</script>
</body>
But for IE to work, you still need to change the iframe settings a bit:
from
<iframe frameborder="0" onload="javascript:resizeIframe(this);" src="./Llibre de dades_files/1_3_4.html" style="height: 7718px; width: 100%;"></iframe>
to
<iframe frameborder="0" scrolling="auto" onload="javascript:resizeIframe(this);" src="./Llibre de dades_files/1_3_4.html" height="7718" width="100%"></iframe>
If you define the style for IE, the size will be stuck at that size and will ignore any script trying to change it.
You also need to tell resizeIframe() to bypass if the browser is IE:
var ie = (navigator.userAgent.indexOf("MSIE") != -1);
function resizeIframe(obj) {
if (!ie) {
setInterval(function(){resizeIframeNow(obj);},3000); // wait around 3 seconds
}
}
function resizeIframeNow(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight;
obj.style.width = "100%";
}
Hope this helps!
While assignment of width in IE and FF, i think you should consider assigning it in pixels.For example, if 100% of window is 1280 px, then assign width as 1280px instead of 100%. I am not sure whether this is the apt solution for you but it did work for me once.
I have problem with a very simple jquery script - it works with all browsers except IE. Basically I want to change the width of a div element with jquery. IE explorer seems to ignore the change. Here is the complete script (only at certain pages, I want to have that change):
<script>
$( document ).ready(function() {
var a, url = document.URL;;
a = document.createElement( 'a' );
a.href = url;
if (a.pathname == '/index.php/somepage')
$("div.component.message").css("width","700px");
});
</script>
The part that doesn't work is with IE (IE 11/ Edge):
$("div.component.message").css("width","700px");
If I put something else in the if clause like an alert it will be executed. The width change does work in Opera, Chrome oder Firefox.
I solved the problem in the php file, which might be better than doing it with javascript in the first place, still I'd like to know if I simply made a stupid mistake or if it is a problem with IE in general.
window.location.pathname returns the leading slash after the hostname in all versions of IE
The <a> tag is only that returns the path without the slash in IE (and Opera as well).
Check Javascript .pathname IE quirk?
You've written double semi-colon at this
var a, url = document.URL;;
This might be a problem. Correct it.
This is my code
<script>
var body = "dddddd"
var script = "<script>window.print();</scr'+'ipt>";
var newWin = $("#printf")[0].contentWindow.document;
newWin.open();
newWin.close();
$("body",newWin).append(body+script);
</script>
<iframe id="printf"></iframe>
This works but it prints the parent page, how do I get it to print just the iframe?
I would not expect that to work
try instead
window.frames["printf"].focus();
window.frames["printf"].print();
and use
<iframe id="printf" name="printf"></iframe>
Alternatively try good old
var newWin = window.frames["printf"];
newWin.document.write('<body onload="window.print()">dddd</body>');
newWin.document.close();
if jQuery cannot hack it
Live Demo
document.getElementById("printf").contentWindow.print();
Same origin policy applies.
Easy way (tested on ie7+, firefox, Chrome,safari ) would be this
//id is the id of the iframe
function printFrame(id) {
var frm = document.getElementById(id).contentWindow;
frm.focus();// focus on contentWindow is needed on some ie versions
frm.print();
return false;
}
an alternate option, which may or may not be suitable, but cleaner if it is:
If you always want to just print the iframe from the page, you can have a separate "#media print{}" stylesheet that hides everything besides the iframe. Then you can just print the page normally.
You can use this command:
document.getElementById('iframeid').contentWindow.print();
This command basically is the same as window.print(), but as the window we would like to print is in the iframe, we first need to obtain an instance of that window as a javascript object.
So, in reference to that iframe, we first obtain the iframe by using it's id, and then it's contentWindow returns a window(DOM) object. So, we are able to directly use the window.print() function on this object.
I had issues with all of the above solutions in IE8, have found a decent workaround that is tested in IE 8+9, Chrome, Safari and Firefox. For my situation i needed to print a report that was generated dynamically:
// create content of iframe
var content = '<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">'+
'<head><link href="/css/print.css" media="all" rel="stylesheet" type="text/css"></head>'+
'<body>(rest of body content)'+
'<script type="text/javascript">function printPage() { window.focus(); window.print();return; }</script>'+
'</body></html>';
Note the printPage() javascript method before the body close tag.
Next create the iframe and append it to the parent body so its contentWindow is available:
var newIframe = document.createElement('iframe');
newIframe.width = '0';
newIframe.height = '0';
newIframe.src = 'about:blank';
document.body.appendChild(newIframe);
Next set the content:
newIframe.contentWindow.contents = content;
newIframe.src = 'javascript:window["contents"]';
Here we are setting the dynamic content variable to the iframe's window object then invoking it via the javascript: scheme.
Finally to print; focus the iframe and call the javascript printPage() function within the iframe content:
newIframe.focus();
setTimeout(function() {
newIframe.contentWindow.printPage();
}, 200);
return;
The setTimeout is not necessarily needed, however if you're loading large amounts of content i found Chrome occasionally failed to print without it so this step is recommended. The alternative is to wrap 'newIframe.contentWindow.printPage();' in a try catch and place the setTimeout wrapped version in the catch block.
Hope this helps someone as i spent a lot of time finding a solution that worked well across multiple browsers. Thanks to SpareCycles.
EDIT:
Instead of using setTimeout to call the printPage function use the following:
newIframe.onload = function() {
newIframe.contentWindow.printPage();
}
At this time, there is no need for the script tag inside the iframe. This works for me (tested in Chrome, Firefox, IE11 and node-webkit 0.12):
<script>
window.onload = function() {
var body = 'dddddd';
var newWin = document.getElementById('printf').contentWindow;
newWin.document.write(body);
newWin.document.close(); //important!
newWin.focus(); //IE fix
newWin.print();
}
</script>
<iframe id="printf"></iframe>
Thanks to all answers, save my day.
If you are setting the contents of IFrame using javascript document.write() then you must close the document by newWin.document.close(); otherwise the following code will not work and print will print the contents of whole page instead of only the IFrame contents.
var frm = document.getElementById(id).contentWindow;
frm.focus();// focus on contentWindow is needed on some ie versions
frm.print();
I was stuck trying to implement this in typescript, all of the above would not work. I had to first cast the element in order for typescript to have access to the contentWindow.
let iframe = document.getElementById('frameId') as HTMLIFrameElement;
iframe.contentWindow.print();
Use this code for IE9 and above:
window.frames["printf"].focus();
window.frames["printf"].print();
For IE8:
window.frames[0].focus();
window.frames[0].print();
I am wondering what's your purpose of doing the iframe print.
I met a similar problem a moment ago: use chrome's print preview to generate a PDF file of a iframe.
Finally I solved my problem with a trick:
$('#print').click(function() {
$('#noniframe').hide(); // hide other elements
window.print(); // now, only the iframe left
$('#noniframe').show(); // show other elements again.
});
In javascript, how can I set the innerHTML of an iframe? I mean: how to set, not get.
window["ifrm_name"].document.innerHTML= "<h1>Hi</h1>" does not work, and the same for other solutions.
Iframe and parent document are on the same domain.
I would need to set html of the whole document iframe, not its body.
I would need to avoid jquery solution.
A really simple example ...
<iframe id="fred" width="200" height="200"></iframe>
then the following Javascript is run, either inline, part of an event, etc ...
var s = document.getElementById('fred');
s.contentDocument.write("fred rules");
the "contentDocument" is the equivalent of the "document" you get in the main window, so you can make calls against this to set the body, head, any elements inside ... etc.
I've only tested this in IE8, Chrome and Firefox ... so you may want to test in IE6/7 if you have copies available.
In Firefox and Chrome (don't know about Opera), you can use the data: URI scheme.
<iframe src=".... data: URI data here ......">
JSFiddle example
Here is a tool to generate data:URI encoded data.
This does not work in IE:
For security reasons, data URIs are restricted to downloaded resources. Data URIs cannot be used for navigation, for scripting, or to populate frame or iframe elements.
If however as you say in the comment, getting/setting the document's body is enough, you are much easier off using one of the linked examples.
There is also the srcdoc attribute:
<iframe srcdoc="<p><h1>Hello</h1> world</p>"></iframe>
Demo, Polyfill.
In improving my file uploads in an AJAXS env I had the same need. This worked for me in ie8 and ff 22.0. Both the body innerhtml and div innerhtml work.
function copyframedata(data) {
var x = document.getElementById("photo_mgr_frame");
var y = x.contentWindow || x.contentDocument;
if (y.document) y = y.document;
y.getElementById('photo_mgr_mb').innerHTML = data;
}
got it from w3
I came across the same problem but here's an easy fix.
function Run(){
var txt = "<h1>Hello World</h1>";
var frame = document.getElementById('frame');
var frame = (frame.contentWindow || frame.contentDocument);
if (frame.document) frame = frame.document;
frame.open();
frame.write(txt);
frame.close();
}
<iframe id='frame'>
</iframe>
<button onclick='Run()'>Run</button>
There is a border showing on an iframe and I can't get rid of it.
IE 6 and 7 work as intended with a little JavaScript:
function test(){
var iframe = document.getElementById('frame2');
iframe.contentWindow.document.body.style.backgroundColor = "#a31d1d";
iframe.contentWindow.document.body.style.border = "#a31d1d";
iframe.contentWindow.document.body.style.outlineColor = "#a31d1d";
}
But the border remains visible in IE 8.
Add following attributes to iframe tag:
marginheight="0" marginwidth="0" frameborder="0"
I had the same problem with iframes created dynamically, and it turned out that setting border properties AFTER adding the iframe to the document has NO effect:
The following code shows a 3d border:
var iframe = document.createElement("IFRAME");
iframe.src = "http:www.stackoverflow.com";
//Iframe added BEFORE setting border properties.
document.body.appendChild(iframe);
iframe.frameBorder = "no";
But this actually removes it:
var iframe = document.createElement("IFRAME");
iframe.src = "http:www.stackoverflow.com";
iframe.frameBorder = "no";
//Iframe added AFTER setting border properties.
document.body.appendChild(iframe);
Hope that this would help solve your problem.
I tried loads of variations on this idea and ended up using something along these lines. Thought I'd share it.
<script type="text/javascript">
url = 'http://www.dollypower.com';
title = 'Dolly Power';
width = '660';
height = '430';
document.write('<iframe src='+url+' title='+title+' width='+width+' height='+height+' frameborder=0></iframe>');
</script>
Then I used noscript tags to enter an alternative for non-JS users, i.e:
<noscript><p>Please click here for Dolly Power</p></noscript>
I tested it in IE8 and it's all cool for me and it also validates.
Hope this might help someone out there!
Success!
Try this. It will find any iframe elements and remove their borders in IE and other browsers (though you can just set a style of "border : none;" in non-IE browsers instead of using JavaScript). AND it will work even if used AFTER the iframe is generated and in place in the document (e.g. iframes that are added in plain HTML and not JavaScript)!
This appears to work because IE creates the border, not on the iframe element as you'd expect, but on the CONTENT of the iframe--after the iframe is created in the BOM. ($#&*##!!! IE!!!)
Note: The IE part will only work (of course) if the parent window and iframe are from the SAME origin (same domain, port, protocol etc.). Otherwise the script will get "access denied" errors in the IE error console. If that happens, your only option is to set it before it is generated, as others have noted, or use the non-standard frameBorder="0" attribute. (or just let IE look fugly--my current favorite option ;) )
Took me MANY hours of working to the point of despair to figure this out...
Enjoy. :)
// =========================================================================
// Remove borders on iFrames
if (window.document.getElementsByTagName("iframe"))
{
var iFrameElements = window.document.getElementsByTagName("iframe");
for (var i = 0; i < iFrameElements.length; i++)
{
iFrameElements[i].frameBorder="0"; // For other browsers.
iFrameElements[i].setAttribute("frameBorder", "0"); // For other browsers (just a backup for the above).
iFrameElements[i].contentWindow.document.body.style.border="none"; // For IE.
}
}
Sample HTML to go with the sample JS would be helpful =)
Try using IE8's Developer Tools (press F12 on the page you have problems with) to isolate what styles are being applied to the iframe. You can also play with the styles there, to cut down your iteration time.
Keep in mind that this may be IE not respecting border settings in the css, whereas the traditional setting of the attribute BORDER=0 on the iframe element may work. Worth a test, at least.
Edit: It looks like what does fix the problem is setting frameborder='0' on the iframe element. That worked for me, at least.
If you want your code to validate you could do this with javascript. I found the perfect answer when I had this problem a few months ago here
var iframe = document.createElement("iframe");
iframe.src = "banner_728x90.gif";
iframe.width = "728";
iframe.height = "90";
iframe.frameBorder = "0";
iframe.scrolling = "no";
document.body.appendChild(iframe);
f you want to load another page seamless in the iframe you can do this if you copy and paste this code into the head of your page. I found it on a site with free scripts. The performance is good in most cases
function getDocHeight(doc) {
doc = doc || document;
var body = doc.body, html = doc.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
return height;
}
function setIframeHeight(id) {
var ifrm = document.getElementById(id);
var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
ifrm.style.visibility = 'hidden';
ifrm.style.height = "10px"; // reset to minimal height in case going from longer to shorter doc
ifrm.style.height = getDocHeight( doc ) + 10 + "px";
ifrm.style.visibility = 'visible';
}
You then give your iframe an id and call the script on load. This is how.
var iframe = document.createElement("iframe");
iframe.setAttribute('id', "ifrm1");
iframe.setAttribute('src', 'http://www.hekcmviw.com/'); // change the URL
iframe.setAttribute('width', '100%');
iframe.setAttribute('height', '10');
iframe.setAttribute('frameBorder', '0');
iframe.setAttribute('scrolling', 'no');
iframe.setAttribute('onload' ,"setIframeHeight(this.id)");
document.body.appendChild(iframe);