Listen to event in another window - javascript

I created a window using var openedWindow = window.open(...).
I have a function which should listen to click event for a button in the new window, but it never fires.
Whenever I click btSearch button it should open another window and listen for #submitButton click event.
btSearch.Attributes["onclick"] = $#"
var openedWindow = window.open(myUrl, "", "toolbar=no,menubar=no,personalbar=no,width=650,height=399,scrollbars=yes,resizable=yes");
window.onModalExit(openedWindow);";
Function is aspx file
function onModalExit(modalWindow) {
$('#submitButton', modalWindow.document).ready(function () {
modalWindow.document.getElementById('submitButton').addEventListener('click', function () {
console.log('RETURNED CORRECTLY');
alert('Now');
});
});
}

you can send data from opened window to opener window via window.opener.postMessage() function.

Every window in a broswer is "isolated", that is there is no way for you to programaticly effect an other window.
That can be done only by the browser who is managing all those tabs. Or maybe by an installed extension for a browser, i suspect those have the power to inject stuff in the running pages probably
EDIT:
Now since that can not be done directly in any way that i know of, you could maybe:
Create a polling mechanism on the tab you want to read the value from
Store the value in some kind of server ( database, in-memory of a back-end etc )
Find a way to associate some kind of ids so you know what to look for.
So you will be transfering the value by taking a long way around PageA -> BackEnd -> PageB.
I am pretty condifent in saying that you can not effect/read from an other tab just by a plain page. You need something of higher layer, like the browser itself, or an extension that has the ability to inject/inspect pages, after a user has agreed to give permissions by installing the extension.

The only solution I see to solve your requirement, would be to use Sockets
But for this, you obviously need some kind of backend.

Related

How to detect in JavaScript when any link or submit button is clicked on a webpage

I have a web page that shows remote asset data (for example weather station data) and that does background XMLHttpRequest()'s every 5 seconds to our server and reloads the page if new data from the remote asset has been received. This has all been working fine for years.
The page also has numerous links and submit buttons that can be used to go to other pages or submit commands to the server (which then sends a command to the asset). Issue I'm having is that some of the commands the server then executes involve calls to 3rd party web services, some of which can occasionally take up to 30 seconds to return or time out. But in the meantime if new data came in from the asset the background JS function reloads the page, thereby interrupting and cancelling the new http request that the user initiated.
I could probably work around this by adding onclick or onsubmit tags to every link and submit button to call a function to disable the timer, but as there can be dozens of links on the page I am hoping there might be a simpler, more elegant way where one simple function can tell me if the user clicked on something and thereby initiated a new active http session.
I enable my script by doing a setTimeout('myCheckServerFunction("'+url+'")',5000); from the html head. If the server then tells it there is new data it does a setTimeout(function(){location.reload();},5000);
So I'd like to disable the JS timer and prevent any reload if the user has clicked any link or button and thus if a new http session is active. Does there exist a function like this? eg. something like "window.isNewHttpRequestActive()" ? Or maybe there's a way I can check if the window.location changed? (not sure if that would get updated before the new http request is complete.)
Otherwise I could maybe attach a addEventListener() to every link and submit button on the page but I'm a PHP dev not JS so if anyone could recommend the best way to parse the DOM and attach a listener to every link and submit button that would work too.
I did try looking for events that "bubble" up to higher layers eg. the body element and that will catch link clicks but also catches any click even just a click on any blank area, So not sure how well that would work as I'd still need to filter that event to determine if it actually came from a link or button. Thank you.
Listening to all click events on body isn't necessarily a bad idea.
EDIT: As gre_gor pointed out in comment, it might be. The perceived target of the click is not always the link or button if other elements are inside of them.
So my original method, which was using event.target.tagName is to be avoided.
The following code would add an event listener for click on every a element of the document, and let you cancel the timer if it is set :
for (let element of document.getElementsByTagName("a") {
element.addEventListener("click", (event) => {
if (relocationTimeout !== undefined) {
clearTimeout(relocationTimeout);
relocationTimeout = undefined;
}
});
}
Up to you to adapt the selector in the loop to fit your needs.
Of course don't forget to store the timeout reference in a variable when you set it :
let relocationTimeout = setTimeout(function(){location.reload();},5000)

Angular8 IFrame before beforeunload event

I have an angular application which is kind of the main application that hosts sub application inside it. The sub applications are also angular applications. The way that I load sub application is through Iframes.
The sub-applications are shown as a list and when I click on an tab, that application is loaded. When I am making some changes to the data in an application and if I click on another sub-tab, I wanted to show a warning message saying " changes will be lost". I am able to achieve it by using beforeunload event as below. I can check to see if there are any unsaved changes and show the warning popup.
#HostListener('window:beforeunload', ['$event'])
unloadNotification($event: any) {
if (**my logic here) {
$event.returnValue =true;
}
}
The only problem with this is, when I click the other sub-tab, the host application highlights that sub-tab and then the warning pop-up is shown. If I click on stay button on the popup, I am able to be on the sub-tab I want but on the host application the other sub-tab is highlighted. So I am trying to see a way to not highlight the other tab if I want to stay on the current sub-tab. Something before beforeunload.
My understanding is you have to update an existing project that's been constructed in such a way that the beforeunload event is employed to achieve something similar to the Angular feature called route guards. You do or don't load the selected iframe depending on your logic implemented with the help of beforeunload event. You don't seem to favor changing this implementation that's why seeking a solution that covers your requirement applying a similar approach like another window event.
If my understanding is correct, you need to refactor this implementation so that the "guarding" happens depending on the inner workings of the "host application" where it actually has to be in the first place. The issue you have arises because by the time the iframe's unload event is canceled, host application's canceled tab gets already selected.
In short, this seems to be handled in your tab's selection event.
My answer may or may not propose a solution you would accept, since we don't have all the details like which component suit you use, I can only present a pseudo solution:
Inside the component where your navigation tab's ui logic takes place:
onTabSelected(selectedIndex) {
if (..your logic here) {
loadIframe(selectedIndex);
highlightTab(selectedIndex);
}
}
There is no such event as before beforeUnload. Two applications i.e. host and child can communicate via postMessage. so in beforeUnload event you can send a postMessage to child application to highlight existing tab. for eg:-
let say you had reference of child window in variable name child1.
child1.postMessage('{'tabId': 'tab1'}');
Your child application can receive this message and highlight the tab with identifier tab1.
Maybe we can create a communication system using the window.top object for example let's say that in the child apps you assign some id.
Then in the main app which hosts the others you create a subobject to window.top.appsMap = {};
Then from each child app you update a boolan value for example
window.top.appsMap['applicationId'] = hasChangesOrNot
Then from the top app where you change tabs you can check if the current opened tab app id has changes and not switch the tab but just try to unload the current iframe, it's not the best solution but if should work you can maybe also set some communication channel backwards which would trigger from the main app which hosts the others the save from the child app
In child app
const origin = this.getCurrentHostOrigin();
if (cancelSwitchTab) {
window.parent.postMessage({}, origin);
}
In host app:
this.renderer.listen(this.windowsRef.nativeWindow, 'message', event => {
const message = event.data;
*** your logic to revert highlight to current tab ***
});

javascript event only on leaving site

I am creating my own simple stats to record which pages were read and for how long etc.
I then use an ajax call to record the info in a database, it's working using the window.ONBEFOREUNLOAD event, however this creates a database record for each page visited and instead I want to save the page stats to js variables and then only do 1 ajax call when the visitor finally leaves the site.
Is there a way of creating an event listener using pure javascript to detect when the user leaves the site, maybe by evaluation the body's click event ???
No.
It is not possible for a browser to provide such an event by default: the browser itself has no awareness of what encompasses an entire site, it's thus impossible for a browser to know when a user leaves a site.
It is easy implement a solution yourself in JavaScript. The implementation is easy, the solution is hard.
You need to consider how you can tell when a user leaves your site. How do you define exit points? Can you define exit points? This is a non-trivial problem. I am not certain a solution exists.
Method 1:
Try the onbeforeunload event: It is fired just before the page is unloaded
It also allows you to ask back if the user really wants to leave.
see this demo
alternatively, you can send out an ajax request when he leaves.
Method 2 :
`if(window.screenTop > 10000)
alert("Window is closed");
else
alert("Window stillOpen");`
Method 3 :
See this article.
The feature you are looking for is the onbeforeunload
sample code:
<script language="JavaScript">
window.onbeforeunload = confirmExit;
function confirmExit()
{
return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?";
}
</script>
All information in this answer are found on StackOverflow.com

How can a Javascript parent window send data to popup window?

I have been writing a browser based application (or rather, rapid prototyping an application) using HTML and Javascript. I would like the main window to be able to display popup windows with dynamic data. However, I cannot figure out how to push data from a parent window to a popup window in Javascript. Note, I am working with the assumption that the application may be used in "offline" scenarios, so all dynamic data should be coming from the main window.
Ideally, I'd like to write
var popup = window.open("popup.html", someidentifier, "");
popup.document.getElementById("SomeIdInPopupHtml").innerHTML = "1,2,3,4";
However, the getElementById function returns NULL. How can I push data to popup windows from a parent window?
Is the popup serving content from a different domain than the parent? If so, the short answer is you can't.
The long answer is that you can sent the popup's href fragment (i.e. the part after the # in protocol://server/path?query#fragment). If the content in the popup knows to check its fragment for changes, then you can pass data to it.
If it's from the same domain then your code should work, as long as an element with that id exists.
However, the getElementById function returns NULL.
Because popup.html hasn't loaded yet. If you want to interact with content from the document, you'll have to call back later when it has finished loading.
For completely dynamic popups, open them with a blank URL and popupwindow.document.write their content into them. For co-operatively-scripting popups loaded from a separate document, have the child document call its parent when it is ready to be accessed. Or just use in-page pop-up divs which are typically less annoyance, both for you as a coder and for the end user.
Let me start off by presenting a possible solution that I just experimented with. I would like to encourage feedback and better solutions, however...
Its not very neat, but I can append GET-style query parameters to the source URL of the popup:
var popup = window.open("popup.html?" + identifier, somename, "");
Now in my particular situation, the popup is a view to some model identified by a unique ID, so the popup window can ask for the parent window for data related to that ID:
var model = window.opener.getModel(document.location.href.split("?")[1]);
do_something_with_model(model);
This strategy won't work in all cases, especially when the data is not easily marshaled into the getModel() implementation. However, in my case, I think this approach may work.
I'd appreciate feedback on this strategy. Thanks!
When the user clicks on your link to open the popup window pass a query string to it and then react to that value with your server side code.

Best way to propagate opener variable across page navigation?

Application that I'm working on has multiple modules. Two are of a concern - main module and module that I write. And I have to call a function on window that contains main module and the problem is that I have to call that function not from page that is opened by parent webmodule, but from page to which user navigates from this page.
Basically first page presents just some query forms, lets user to make some query, and second holds query results, and I am supposed to update contents of parent page based on these results.
Navigation goes like that
Main module
First page of my module (i have main module page as an window.opener variable.
Second page of my module (and I would like to be able to open this page in the same browser window that the first one is opened)
And I would like to have as free navigation as possible - like opening query results in new tab, going back changing query parameters, making new query, etc. I would also like to present user query forms on page that displays results and let them to refine this query, and still be able to update main module.
I was thinking of following solutions:
Using AJAX to load query results to first window, but I would like to have this app as simple as possible, and AJAX is not simple ;)
Spawning new window on every request and doing code like var mainModule = opener.mainModule. Which is evil.
Embedding query results in a frame or iframe, but I havn'e got the slightest idea on how to inject main module window javascript variable into frame or iframe.
If being able to navigate in tabs is a requirement, I think you'd have to nix the idea of using a JavaScript opened window system. Because the opener property is definitely lost in Firefox, Safari, and most browsers, when you navigate to a different window. A new tab disturbs the neat sandbox.
Not being a requirement, per your comment, I think you can use either of 3 methods:
Parent-Child window communication-- which I will take up
next;
XMLHTTP Requests (a.k.a.
AJAX); or
iFrames (the old way
to remote to the server :)
I'll take the Parent child communication angle, here, since you seem to be most comfortable with it.
Inter-navigation in a "Child" window is easy.
any link on the page loads in the child and shares the same "opener".
the parent can reload a different page and it shares the same opener.
There will be a parent-listener function in the child;
The child will have a separate function to talk to the parent.
The parent will have one or more child listeners, depending on how
generic, or specific your needs.
I've updated (not completely) an article I wrote years ago, to let you play around with the windows and to actually do a minimal form submission. The communication alerts are rather verbose; but you will have no doubt as to who is communicating what to whom. The first child is annoyingly opened onload. But there is a link on the page to change the child to a server-generated form.
JavaScript: Beyond Parent Child Windows
EXAMPLE CODE SNIPPETS:
A Link:
open a window from link
Link Listener:
The event listener and target property are set up in the head of the document, in JavaScript that executes onload:
var mywin; //global variable for best results
//XDOM - normalizes browser differences:
var openingLink = XDOM.getElementById('newwinlink');
openingLink.target = "newWin"; //important!
XDOM.addListener(openingLink, 'click', function(e){mywin=window.open('','newWin','width=400,height=400,resizable,scrollbars');if (!mywin.opener){mywin.opener = self;}return true}, false);
Child Document - Parent Listener:
function parentListener(pmsg)
{
alert("I'm the child, and I just received the following message from my parent:\n\n" + pmsg);
}
Child Document - Talk to Parent:
function talktoParent()
{
if (self.opener!=null) {
opener.childListener("Hi from child window!");
} else {
alert("no opener... sorry, can't talk now");
}
}
Parent Document - Child Listener:
function childListener(cmsg)
{
alert("I'm the parent. Just received the following message from my child:\n\n" + cmsg);
//send back a message to the child, mywin...
mywin.parentListener("Hi, back, from parent window!");
}
These are simplistic. But you can see opener continuity, navigation, and communication between server-side postbacks and the Parent at the link provided above.
Again the downside is that opening any of these in another tab will lose the connection to the parent. Try it over on the page that I sent you to. I believe the child is set to alert you that it is disconnected from its "opener".
Feel free to ask questions, jb.
iirc, even after you navigate away from the original document in a window opened by window.open, window.opener is still available.

Categories

Resources