I'm learning using the Win.JS navigation and I am able to navigate between pages now. But I'm having errors when I leave a page and trigger a event from the first page.
So the problem is. I have some javascript running on Page1.html | .js
If I press the Arrow up button on my keyboard for example a javascript runs (onclick). This works okay, but then I click on a button and navigate to Page2.html also with a ( .js) and if I then also click on the Arrow up button I get an error. It tries to start the function that is called within the onclick, and that isn't there anymore in my Page2.
So the question is, how can I unload these javascript triggers from Page1 if i'm notttt on that page anymore?
In your WinJS Page definition you can define unload method that is always invoked when the user leaves the page. Unregister all event handlers there.
WinJS.UI.Pages.define("/page.html", {
ready: function (element, options) {
// add onclick handler
},
unload: function() {
// remove here all event handlers
}
});
Related
We are working on an Open Source Chrome extension: Digital Assistant Client
Product Demo:
Part 1: https://www.youtube.com/watch?v=Iz2WgKY0fhc
Part 2: https://www.youtube.com/watch?v=i0_MNfBnYfM
We are having trouble in getting our onclick event handler executed when the page is navigated to another page.
I want to invoke all the onclick event handlers attached to a domnode that the user has clicked before the page gets navigated to another page so that our functionality gets executed. The solution should work for any framework that cancels the bubbling of the onclick event handlers.
There are some questions already raised by some people as given below
How to ensure that a function is executed completely, before navigating to another page?
How to execute onclick before navigating to a different page?
Thanks in advance
You can probably monkey-patch addEventListener on the DOM Node, capture the event handlers that get registered later, and maintain a list of those.
const originalEventListener = DOMNode.addEventListener;
DOMNode.addEventListener = (type, callback) => {
const clicksHandler = [];
if(type === 'click'){
clicksHandler.push(callback);
originalEventListener.call(DOMNode, type, callback);
}
}
You can probably use beforeunload event to make sure all the clicksHandler are called once again before user navigates away.
window.onbeforeunload = (e) => {
clickHandler.forEach((handler) => handler.call(...))
}
you just have to call the event on that element.
const button1 = document.getElementBy....
button1.click()
add alert before navigation inside click method, so alert will notify you.
I have an application (name it B) which is being embbeded in an Iframe by another main application (Name it A or parent).
So: App A-- // domain of A: https://mydomain/mainApp
|___ App B in Iframe // domain in B: https://mydomain/appB
Problem is: Then main/parent app has a navigation menu. One item, when clicked, creates an Iframe with SRC ATTRIBUTE loading App B inside.
When the user clicks into another option of the menu in app A, the Iframe is destroyed and another content View in React appears, replacing the Iframe.
When doing this, all data typed in forms by the user in B are gone, as I can not trigger a save event I have in B.
I have added following event handler in the iframe app:
window.addEventListener("beforeunload", function (e) {
// Trigger here the save settigns event inside B
});
But former code is never triggering when user navigates through Main App menu. As I can see, navigating menu in App A, changes URL in the browser(but seems a SPA React.js routing or similar, no real redirection).
Question is: Can Iframe detect when is going to be unloaded/destroyed to trigger first the Saving Settings in Ajax ? P.S: I don't have access to App A code.
Thanks in advance
From MDN:
The WindowEventHandlers.onbeforeunload event handler property contains the code executed when the beforeunload is sent. This event fires when a window is about to unload its resources. The document is still visible and the event is still cancelable.
The unload event is fired when the document or a child resource is
being unloaded. It is fired after:
beforeunload (cancellable event)
pagehide
Example:
<body>
<input type="button" id="removeIframeBtn" value="remove iframe"/>
<iframe id="iframe" src="http://localhost:8080/iframe.html"></iframe>
</body>
<script>
const removeIframeBtn = document.getElementById("removeIframeBtn");
const iframe = document.getElementById("iframe");
iframe.contentWindow.onbeforeunload = function () {
debugger;
};
window.onbeforeunload = function () {
debugger;
};
removeIframeBtn.onclick = function () {
iframe.remove();
};
</script>
Let assume that page with current code is opened in the browser tab.
If you try to close this tab, iframe.contentWindow.onbeforeunload will be called.
If you try to click on remove iframe btn, iframe will be removed from document but iframe.contentWindow.onbeforeunload will not call. There is no unload event.
React renders components with js, so it is totally like second case with clicking on remove iframe btn.
So the answer on your question is: it is not possible to detect unloading of iframe with onbeforeunload event in single page application on route changing.
Solution for you can be to save settings on every its change.
unload event works so you can do
IframeWindow.addEventListener('unload', ()=>{
debugger
})
I need to call a function (which one will open a popup) when my page is loading.
If I want the popup to be open, the function should be called by a user event (a click or something).
I tried to simulate the click event but it's not isn't working. The function is being called but no click event has been created.
For example, I tried with angular to do the following:
var element = angular.element("<div ng-click='MyFunction()'></div>");
compiled = $compile(element)(scope);
$timeout(function () {
compiled.triggerHandler('click');
}, 100)
#IsraGab,when you want an user event when page loads then i think you must go for onmouseout Event for body element.
here is plunker link:
Plunker
There is the following situation:
I've implemented a chat module with a directive and controller in my AngularJS application. This is used in the lobby and for the game itself.
Somewhere in the link() function of the directive I am using the following code to accept the enter keystroke as an input trigger.
$('#msgInput').keypress((e) => {
if( e.keyCode == 13 ) // Enter
{
var chatMsg = {
message : $('#msgInput').val()
};
$('#msgInput').val('');
scope.chatModel.sendMessage(chatMsg);
}
e.stopPropagation();
});
Initially when the page loads for the first time everything works fine - I navigate to the lobby, the event handler gets registered and for every input the callback gets executed.
This continues to work until I decide to navigate to the game menu.
Once again the directive's link function gets triggered and registers the same event handler as before.
From this point any keypress() to the input box isn't handled by the event handler anymore.
As soon as I reload the page (f5) either in the lobby or game - everything goes back to normal and works fine and stops once again when I navigate back to the other menu (lobby or menu).
Edit: When I navigate back to the menu where I came from, the keypress() also stopped working for this menu (now for the lobby & game). Only a reload helps.
What am I missing? The event handler apparently gets registered but just doesn't trigger after an initial navigation in either menu.
On - window.location.hash - Change?
The above question talks about hash change while this question talks about callback whenever internal link is clicked
I have many links in a page that points to another location in the same page using # links. Whenever, I click one such link, the page scrolls to that location. But I need to adjust the scroll manually after the automatic scroll happens. So would like to know if there is any callback function for such events?
Also the event should fire if the # tag was present in the initial page load (not only when it is clicked with a link) and when the same link is clicked again (hashchange event won't fire in this case)
You can register one by calling this function on the element:
addEventListener('click', function(){/*update your stuff here/*});
in jQuery, it's even easier
$('a').on('click', function(){/*update your stuff here/*}); will update after every link click.
There is no specifica callback that I know of but you could bind a function to the window.onscroll (https://developer.mozilla.org/en-US/docs/DOM/window.onscroll) event. That will detect when the window has been scrolled by the links being clicked and will let you make your adjustments. Then only problem is that it will also fire off when a user scrolls the page normally.
Other than that you would add a class to all your # links that will allow you to detect when one has been clicked. In jQuery:
$("a.HASH-LINK-CLASS").on("click", function (event) { ... });