I generate an iFrame dynamically like this
var iframe=document.createElement('iframe');
document.body.appendChild(iframe);
var iframedoc=iframe.contentDocument||iframe.contentWindow.document;
iframedoc.body.innerHTML="HI";
Fiddle: http://jsfiddle.net/Pbj7S/
It works in Google Chrome, Opera, Safari, but not in Firefox.
Any idea why?
This works :
var iframe=document.createElement('iframe');
document.body.appendChild(iframe);
setTimeout(function(){
var iframedoc=iframe.contentDocument||iframe.contentWindow.document;
iframedoc.body.innerHTML="HI";
}, 10);
The problem was that you were trying to access the iframe document before it was available in the DOM.
The delay isn't important, the important point is that browsers update the display (and some js accessible objects in the case of Firefox) only after the js thread has finished working.
Nothing like that is necessary. You do not need to use timeout or anything for firefox to behave like chrome. In your code just set the source to 'javascript:' would do it. Example bellow:
iframe.src = 'javascript:';
or just use:
iframe.src = 'about:';
don't set with blank. Will work just fine in firefox, chrome, opera, etc....
Related
I have a link that opens a popup window using window.open(). The problem is the scrollbars don't work in Chrome. They work in IE and Firefox, so I'm thinking it has something to do with Chromes new scroll bars. This is an example of the code I'm using:
html:
Click Me
jQuery:
$('a').click(function() {
window.open("http://google.com", "", "width=300,height=300,scrollbars=1");
});
I also set up a jsfiddle here http://jsfiddle.net/88GBR/
Any thoughts would be much appreciated.
from http://www.w3schools.com/jsref/met_win_open.asp
scrollbars=yes|no|1|0 Whether or not to display scroll bars. IE, Firefox & Opera only
try to set css-prop explicitly overflow: scroll;, otherwise no chance I guess
Works fine for me, Chrome Version 32.0.1700.76 m running on Windows Vista x32
Tried to post screenshot but I don't have required rep, tried to post this as a comment instead of an answer but hey... don't have that rep either :D
in this way should work, but i would try the window.open action in a 'div' and not in an 'anchor'
$("#divClick").click(function(){
window.open("https://www.google.com","some","toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=900px,height=500px");
}
In my case..
call 3 function then working fine~!!
document.open --> document.writer --> document.close
e.g.
var option = 'menubar=no,status=no,titlebar=no,toolbar=no,scrollbars=yes,resizable=yes,height=600,width=800';
var win = window.open(null, null, option);
var div = domConstruct.create('div');
/// add content in div ...
win.document.open(); // must call...
win.document.write(div.innerHTML);
win.document.close(); // must cal...
it worked for me, i find my crome was not supporting scrollbars=1 so i changed it as scrollbars=yes
var docprint = window.open('', '', 'scrollbars=yes,resizeable=yes,width=900, height=850');
docprint.document.open();
docprint.document.write('<html><head><title>Print Page Setup<\/title>');
docprint.document.write('<\/head><body onLoad="self.print()"><center>');
docprint.document.write(data);
docprint.document.write('<\/center><\/body><\/html>');
docprint.document.close();
docprint.focus();
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.
I'm using jQuery templates for a website I developed and they work perfectly fine on Chrome, Safari, and even IE9, but the templates just won't render on Firefox. I'm loading them externally, and the $.get is processed (I've checked Firebug, the get goes through and pulls the right file), but then I'm greeted with a blank page and inspecting the html reveals the body element contains only the footer (included in the html), but with display : none, which is how it should be, so the javascript ran to completion (since the footer is hidden inside the loadtemplate functions). It seems that Firefox is simply skipping the $.tmpl() call. Here's the function :
var loadTemplate = function(templateName){
$.get(templateName, function(template){
$.tmpl(template).appendTo("body");
});
};
var loadHomePage = function(){
history = [];
clearPage();
loadTemplate("./templates/home.tmpl");
current_page = "./templates/home.tmpl";
}
var clearPage = function(){
$(".page-content").remove();
$(".page-header").remove();
$("#popup-container").remove();
$(".page-footer").hide();
};
Any help would be greatly appreciated, I can follow up with more code if required as well.
EDIT: even works on Opera, I don't need to support it so the styles don't work (using LESS which Opera doesn't support and a css file strictly for IE), but it still loads the templates without a problem.
Requesting a template may get processed as HTML by some browsers, which in-turn can result in a mangled template. Try setting the datatype to "text" so that all browsers properly return un-modified text.
$.get(templateName, function(template){
$.tmpl(template).appendTo("body");
}, "text");
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.
});
I have script, which appends in the document:
window.d = document
s = d.createElement('script')
s.setAttribute('type','text/javascript')
s.setAttribute('src',options.url)
d.getElementById(block_id).appendChild(s)
$(s).load(function() {
alert('')
})
In Opera, FF and Chrome load works fine, but not in IE.
The answer to this similar question may help you
Element.appendChild() chokes in IE
The reason may be that appendChild just doesn't work in IE.