How a page can be determined if it's loaded - javascript

I'm going to use postMessage method to send a text to an opened window right after opening the window on ther origin.
I tried the following:
let ref = window.open("<address>", "name", "resizable,scrollbars,status");
ref.postMessage("Some Message");
A listener is defined on the other page to get the posted message, but it doesn't work, since the posted message is being sent before the page loading is completed.
Is there any way to check that the page on the opened window is fully loaded?

You can implement an "handshake" mechanism, so it would be like,
parent adds an event listener to catch child messages (window.addEventListener('message', () => {}))
parent opens child window
child window sends "I'm a live" message to parent (parent.window.opener.postMessage('ImALive', '<url address of parent>'))
parent sends it's data to child
Something like that.

You can try simple Javascript trick as below to see if DOM is loaded, you can use this function which will get execute after DOM gets load.
document.addEventListener('DOMContentLoaded', function(event) {
//alert("hello"); your code
})

Have you tried $(window).load(function(){}).
You can write your code in this event and then try it.
This question on SO might help.

Related

Dynamically pass iframe url parameters to parent URL

I'm new with iframe interactions with parent, so let me explain the issue I'm facing in simple terms:
I have a site with an iframe. How can I use JavaScript or jQuery code to dynamically change my parent URL depending on what the user clicks in the iframe?
For example, if my parent URL is parent.com?page=1&currency=eur then my iframe will automatically be iframe.com?page=1&currency=eur, but the user can click another link inside the iframe. If the user clicks on a link and the iframe src changes to iframe.com?page=another_page, I want the parent URL to dynamically change to parent.com/page=another_page or parent.com#page=another_page. In other words, I pass all iframe URL parameters to parent.
Can anyone help me with this?
I have full control over parent window and can add some code to child as well but they're not on the same domain.
Thanks
You can use window.postMessage to achieve interaction between parent-iframe/child window across 2 different domains.
In your case, since your child is modifying your parent, you should set up a listener on your parent page like so
window.addEventListener("message", (event) => {
if (event.origin !== "http://thisisyourchilddomain.com") // You must check for the sender's origin or your website could be exploited !!
return;
// do something
}, false);
And in your child page, you would call the method window.postMessage
parent.postMessage("hello there parent! please perform a redirect with the following params...", "http://thisisyourchilddomain.com");
Note that parent is a global here that you can access from your child. Also, you can pass an object to the first parameter of postMessage({key:value}, ..)
Examples were taken and modified from the link to window.postMessage (mozilla).

Javascript : get current window.open() when parent window was refreshed

I want open window but when user refreshed parent location or going to hyperlink, we got last child window and using this code win_pop.location.replace('http://example.com') .
for example :
var win_pop = window.open(url, 'lastWin', 'width=300px,height=200px,top=1200px,left=2000px');
why after refresh parent location child window doesn't working.! before any refresh or going to hyperlink in parent page that working well.
win_pop.location.replace('http://example.com') !!
Do you got any best suggest ?
You load a page
You assign a value to a variable called win_pop
You load a new page
The lifespan of a JavaScript program running in an instance of a webpage is only as long as that webpage instance exists.
When you have a new page, you have a new JS environment, and the old data is lost.
win_pop no longer contains the value you assigned to it.
Much of the time you can store data between pages (e.g. via Local Storage), but that only applies to simple objects, arrays and primitives.
There is no way to preserve the reference to a new window.
The only way to achieve that effect would be to avoid reloading the original page. For example, by performing all navigation to "new pages" by using Ajax and manipulating the history with pushState and friends.
#Quentin is right about what happens to your js variable, but he seems to have forgotten a little thing:
You can make use of the postMessage API and the MessageEvent.source property which will point to your popup Window.
So you can start a loop on your popup which will post a message every n-th seconds to window.opener.
setInterval(function(){
window.opener.postMessage('foo', '*');
}, delay);
Then in all your pages, you will listen for the message event, and set your popup variable to the MessageEvent.source you just retrieved:
onmessage = function(evt){
popup = evt.source;
};
And voilà!
Here is a plnkr

BHO render event

I am developing IE extensions using BHO. Currently I am using OnDocumentComplete event which fires when the page loading is completed. I want to inject my JavaScript while rendering HTML such that I can update HTML on the fly.
Simple example:
I want to replace HREF attribute. But on OnDocumentComplete event user can click the link and can access the actual link. But if he/she waits till the page load complete then he/she will be redirected to the updated link.
Please provide your valuable inputs such that DOM can be updated while rendering.
Thanks,
Maitrey
While page is loading you can use:
<script>
window.onload = function(){
/* DOM handling */
}
</script>
to execute Javascript, is this what you meant?
you can execute your javascript using IHTMLWindow2::execScript called on the window object inside the OnDocumentComplete handler:
public void OnDocumentComplete(object pDisp, ref object URL)
{
HTMLDocument document = (HTMLDocument)webBrowser.Document;
IHTMLWindow2 parentWindow = document.parentWindow;
parentWindow.execScript("alert('your javascript')");
}
where webBrowser is the object of the WebBrowser class that you've set in SetSite

Call JavaScript of parent window from child window

I have a calendar and when I click on a <td>, a pop-up window appears so you can create your evenement for the date you selected. I want to add a feature.
When the user finishes creating the event, I want to send a JavaScript request to the parent page so I can refresh the calendar using AJAX. Basically, I want to call a function from the child, but the function is on the parent page.
On Google, I only found a script that can refresh the parent window – nothing about a “parent callback”. ☹ Is it even possible?
P.S. The answer can be pure JS or jQuery, it doesn’t matter. I’ll keep looking in the meanwhile.
What you're looking for is a reference to the window that opened the popup window. Once you have that, you can call functions in that window, read and write variables in that window, or even manipulate its DOM.
That reference is called opener. It gives you the window object for the window that opened the current window. For example, if you have a function in the original window like this:
function updateMe( data ) {
alert( data );
}
then in the popup window you could call it like this:
opener.updateMe( 'Hello!' );
Naturally, you need to make sure that updateMe() is a global function in the original page. Or if you have some object in the original page and updateMe() is a method of that object, you can still do it, as long as the object is global. e.g. in the host page:
var myObject = {
updateMe: function( data ) {
alert( data );
}
};
then in the popup you could do:
opener.myObject.updateMe( 'Hello!' );
Basically, as long as you could get to the object or function in the original page with window.whatever, then in the popup you can simply change that to opener.whatever.

How to check location.href is completed?

I want open a window and then does something after it finishes loading, is there an easy way to do this?
my current code is something like:
cur_window = window.open( 'http://www.google.com' )
// does something when cur_window finishes loading
thanks
The only way to do this is if you write code in the page which is opened in the popup to tell the parent page, the opener object in js, that it has finished loading.
In your example, as your are loading Google, this is not possible.
Assuming you're accessing pages within the Same Origin...
the "easy way" isn't as responsive as jQuery's ready event which can't be applied outside of the original window context:
cur_window.onload = function () {
//new window has loaded
};
If you're trying to open http://www.google.com/ in a new window, you wont have any access to the window object, and therefor have no way of knowing when the new window has loaded.

Categories