window.onload DOM loading in popup, browser compatibility - javascript

I have HTML popup window and i want add text after opening window with spec. function:
var win = window.open('private.php', data.sender_id , 'width=300,height=400');
win.window.onload = function() {
//function for add text
//chrome and firefox fire, IE and Opera not
};
This work perfectly with Chrome and Firefox, but Opera and IE9 won't working. Please tell me
best way to do that with IE and Opera.
I try with:
$(document).ready(function(){
//function for add text
});
but same thing.
I found solution, but i wont know is there better solution then setTimeout???
Instead onload event i use:
setTimeout(function(){
//add text
},200);

index.php
function callback() {
// ...
return xxx;
}
private.php
$(document).read(function() {
var text_to_insert = window.opener.callback();
})

You may try this (tested in chrome, FF, IE but don't know about opera)
var win = window.open('private.php', data.sender_id , 'width=300,height=400');
win[win.addEventListener ? 'addEventListener' : 'attachEvent']((win.attachEvent ? 'on' : '') + 'load', myFunction, false);
function myFunction(){
win.focus();
win.document.write('loaded...');
}​
You may also try DOMContentLoaded event, if it works.
DEMO.

Related

detect exit event in IE and Fireforx

I want to detect the exit event on all browser, I tried this code :
<html>
<head>
<script type="text/javascript">
window.onbeforeunload = function (event) {
var message = 'Important: Please click on \'Save\' button to leave this page.';
if (typeof event == 'undefined') {
event = window.event;
}
if (event) {
event.returnValue = message;
}
return message;
};
</script>
</head>
<body>
<p>
Exit your browser ....
</p>
</body>
</html>
this code works in Chrome and safari but it it does'nt work in IE 11 and Fireforx 50.0.1 ... Any ideas ?
From the MDN page following notes are being mentioned
Note also, that various mobile browsers ignore the result of the event (that is, they do not ask the user for confirmation). Firefox has a hidden preference in about:config to do the same. In essence this means the user always confirms that the document may be unloaded.
The hidden keys inside about:config can be found with the keys dom.disable_beforeunload and dom.require_user_interaction_for_beforeunload.
Your code seems fine for the rest, so it may help to look in your config files (The note mentions mobile browsers, however I have these settings on my Desktop browser as well)
Try with
window.addEventListener('beforeunload', function(evt){ ...
this is the response that I find, It work for me.
window.addEventListener("beforeunload", function (e) {
var confirmationMessage = "\o/";
(e || window.event).returnValue = confirmationMessage; //Gecko + IE
return confirmationMessage; //Webkit, Safari, Chrome
});
thank you

window.open & close several times

I made a new window using window.open(); and I want to close it. So I made this code.
$('#open').on('click', function () {
var win = window.open("", "", "width=400, height=200");
$newWindow = $(win.document.body);
// more code
$newWindow.find('#close').on('click', function () {
win.close(); // just works once
});
});
And it works good in FF, works just once in Chrome (close button stops working), and does not work on IE11 (just tested v11)...
What am I doing wrong? ie, how to fix this to work cross browser?
jsFiddle
The problem is with this line:
$newWindow.html(content);
You need to clone the element before you add it to the popup. Otherwise you are removing the original element and moving it to the new spot.
$newWindow.html(content.clone());
Updated Fiddle: http://jsfiddle.net/XL7LR/10/

Javascript .onload not firing in IE? window.open reference issue?

I haven't been able to make sense of the answers to related questions so far(down to my knowledge level), so...
I have a simple script(using jQuery) that opens a new window and adds certain content from the parent into a specified container inside the child. I'm not sure if it's my approach that's wrong or I'm just missing a step - the script to run on the new window runs in IE when it's outside of the window.onload function, but this breaks FF, and FF is happy when it's inside of the window.onload, but then the new window in IE doesn't appear to be doing anything(no alert, no add of content, nada).
Please can anybody explain to me why this is the case/what I'm doing wrong? Is it something to do with the reference to window.open?
This is the script:
var printPage = function(container){
$('.printButton').click(function(){
var printWindow = window.open('printWindow.html');
var contentFromParent = $(container).eq(0).html();
/*works for IE, but not FF
printWindow.alert('works for IE, but not FF');
printWindow.document.getElementById('wrap').innerHTML = contentFromParent;*/
/*works for FF and Chrome but not IE:*/
printWindow.onload = function(){
printWindow.alert('works for FF and Chrome but not IE');
printWindow.document.getElementById('wrap').innerHTML = contentFromParent;
}
/*I also tried:
$(printWindow.document).ready(function(){
printWindow.alert('load the page, fill the div');
printWindow.document.getElementById('wrap').innerHTML = contentFromParent;
}); //works for IE, not working for FF/Chrome*/
})
}
printPage('#printableDiv');
The HTML:
<div id="wrap">
<button href="#" class="printButton">Print</button>
<div id="printableDiv">
<p>I want to see this content in my new window please</p>
</div>
</div>
UPDATE
Thanks for your pointers about onload in the new window - I've gone with this solution for now: Setting OnLoad event for newly opened window in IE6 - simply checking the DOM and delaying the onload - working for IE7/8/9.
I'm not sure if you'd call it an 'elegant' solution, but it's working! Further comments, especially if you think this is flawed, would be appreciated. Thanks.
var newWinBody;
function ieLoaded(){
newWinBody = printWindow.document.getElementsByTagName('body');
if (newWinBody[0]==null){
//page not yet ready
setTimeout(ieLoaded, 10);
} else {
printWindow.onload = function(){
printWindow.alert('now working for all?');
printWindow.document.getElementById('wrap').innerHTML = contentFromParent;
}
}
}
IEloaded();
Can it be that the page you open fires the 'onload' event before you set the event handler printWindow.onload = ... ?
You might consider including some javascript in your 'printWindow.html' page. Let's say you add a short <script>var printWindowLoaded = true;</script> at the end of your page. Then your main script would do something like this:
function doStuff() {
//...
}
if (printWindow.printWindowLoaded)
doStuff();
else
printWindow.onload = doStuff;

jQuery event.target not working in firefox and IE?

I'm working on making an image slider that loads the image the user clicks on using jQuery. I have it working great in Chrome but when I tried it in firefox and IE it's not loading the image at all. Here's my code:
$("img.clickable").click( function() {
$("#image_slider").animate({opacity:1.0,left:200},"slow");
$("#image_container").attr("src",event.target.src);
ihidden = false;
});
When I try running this in firefox or IE it just doesn't load the image at all. Any ideas? :)
You need to define the event in the arguments.
$("img.clickable").click( function(event) {
$("#image_slider").animate({opacity:1.0,left:200},"slow");
$("#image_container").attr("src",event.target.src);
ihidden = false;
});
Otherwise it is going to use window.event.
try using $(this).attr('src') instead of event.target.src
Try this :
target = (window.event) ? window.event.srcElement /* for IE */ : event.target
$("img.clickable").click( function(e) {
$("#image_slider").animate({opacity:1.0,left:200},"slow");
$("#image_container").attr("src",$(e.target).attr('src'));
ihidden = false;
});
This should work just fine

How do I print an IFrame from javascript in Safari/Chrome

Can someone please help me out with printing the contents of an IFrame via a javascript call in Safari/Chrome.
This works in firefox:
$('#' + id)[0].focus();
$('#' + id)[0].contentWindow.print();
this works in IE:
window.frames[id].focus();
window.frames[id].print();
But I can't get anything to work in Safari/Chrome.
Thanks
Andrew
Here is my complete, cross browser solution:
In the iframe page:
function printPage() { print(); }
In the main page
function printIframe(id)
{
var iframe = document.frames
? document.frames[id]
: document.getElementById(id);
var ifWin = iframe.contentWindow || iframe;
iframe.focus();
ifWin.printPage();
return false;
}
Update: Many people seem to be having problems with this in versions of IE released since I had this problem. I do not have the time to re-investigate this right now, but, if you are stuck I suggest you read all the comments in this entire thread!
Put a print function in the iframe and call it from the parent.
iframe:
function printMe() {
window.print()
}
parent:
document.frame1.printMe()
I used Andrew's script but added a piece before the printPage() function is called. The iframe needs focus, otherwise it will still print the parent frame in IE.
function printIframe(id)
{
var iframe = document.frames ? document.frames[id] : document.getElementById(id);
var ifWin = iframe.contentWindow || iframe;
iframe.focus();
ifWin.printPage();
return false;
}
Don't thank me though, it was Andrew who wrote this. I just made a tweak =P
In addition to Andrew's and Max's solutions, using iframe.focus() resulted in printing parent frame instead of printing only child iframe in IE8. Changing that line fixed it:
function printIframe(id)
{
var iframe = document.frames ? document.frames[id] : document.getElementById(id);
var ifWin = iframe.contentWindow || iframe;
ifWin.focus();
ifWin.printPage();
return false;
}
I had to make few modifications in order to make it with in IE8 (didn't test with other IE flavours)
1) document.frames[param] seem to accept a number, not ID
printIframe(0, 'print');
function printIframe(num, id)
{
var iframe = document.frames ? document.frames[num] : document.getElementById(id);
var ifWin = iframe.contentWindow || iframe;
ifWin.focus();
ifWin.printPage();
return false;
}
2) I had a print dialog displayed upon page load and also there was a link to "Click here to start printing" (if it didn't start automatically). In order to get it work I had to add focus() call
<script type="text/javascript">
$(function(){
printPage();
});
function printPage()
{
focus();
print();
}
</script>
Use firefox window.frames but also add the name property because that uses the iframe in firefox
IE:
window.frames[id]
Firefox:
window.frames[name]
<img src="print.gif" onClick="javascript: window.frames['factura'].focus(); parent['factura'].print();">
<iframe src="factura.html" width="100%" height="400" id="factura" name="factura"></iframe>
One thing to note is if you are testing this locally using file:///, it will not work on chrome as the function in the iframe will appear as undefined. However once on a web server it will work.
You can use
parent.frames['id'].print();
Work at Chrome!
You can also use
top.iframeName.print();
or
parent.iframeName.print();
The 'framePartsList.contentWindow.print();' was not working in IE 11 ver11.0.43
Therefore I have used
framePartsList.contentWindow.document.execCommand('print', false, null);
In Chrome:
Press Ctrl+Shift+C to select the iframe.
Click anywhere in the iframe.
Go to the console tab and type window.print();
This works because in Chrome Dev Tools, the window element adjusts to whatever <html> context you are in.
Use this:
window.onload = setTimeout("window.print()", 1000);

Categories

Resources