I'm trying to catch each page load on https://forum.vivaldi.net
//==UserScript==
//#include https://forum.vivaldi.net/*
//==/UserScript==
(function () {
window.addEventListener('DOMContentLoaded', function () {
alert('A new page is loaded');
});
})();
This will fire each time I hit enter in the address bar.
But nothing happens when I navigate from one page to another in the forum.
Why isn't DOMContentLoaded firing at each page load?
That site uses Ajaxify to automatically convert all intra-site links to XHR requests. DOMContentLoaded isn’t firing between pages because there is no new page loading - just content downloading in the background and being inserted into the current page.
You can see this in action by following the activity in the Network tab of your browser’s developer tools.
As for how to catch each page load in this instance, check out the events exposed by Ajaxify.
Related
I have a content script from a chrome extension injected in a youtube page.
Something like:
$(document).ready(function () {
console.log("[INFO] Changes detected");
myFunc();
}
When I refresh the script executes as expected. When I navigate in between pages,
ready() does not fire. Does this mean that the document does not change? Inspecting the
elements it obviously does.
Why isn't .ready() firing while navigating on a page?
When navigating between /watch?v=VideoID videos on YouTube, you are essentially staying on the same page. Elements of the page get replaced with the help of XHR requests, but the document itself does not change.
You can see this if you open the Network tab and watch what happens when you navigate to a new video:
Notice how document is not any one of the request types there.
New documents are only loaded when you see document get requested, like in the following, where I press Enter from the address bar:
$(document).ready( only fires when a new page is loaded, not when parts of the current page get replaced with .innerHTML etc.
If you want to detect when parts of the page get replaced, use a MutationObserver.
The cordova inAppBrowser has the next option on opening (as mentioned in https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-inappbrowser/):
hidden: set to yes to create the browser and load the page, but not show it. The loadstop event fires when loading is complete. Omit
or set to no (default) to have the browser open and load normally.
The problem is that I want to detect and execute code when the browser is completely rendered on the screen of the device. The api provides "loadstop" event, but it's executed before the device's screen is showing the web page.
Is there any way to detect this moment?
EDITED:
This is what I'm trying (not exactly but similar):
inappService.runScript(
function (params) {
function handleVisibilityChange() {
if (!document.hidden) {
$('input#otp')[0].focus();
}
}
document.addEventListener('visibilitychange', handleVisibilityChange, false);
);
But "visibilitychange" occurs when the page is preloaded hidden. Any idea of how I could detect it with javascript on the web page? Thanks!!!
The inAppBrowser has no event for when the it completely renders the page. However, you can try using its executeScript() method which allows to inject your own JavaScript. That allows you to use whatever technique you like for detecting the complete rendering of the page.
While creating a Safari extension, I tried adding an End Script on Youtube pages. The script runs when the first Youtube page loads. The problem is that if I click any of the Youtube links in the page, nothing happens. However, if I open the link in a new tab, it works like a charm. Any idea why this happens?
The code is just a simple alert:
if (window.top === window) {
alert("Hello World");
}
and the pattern I used for the Allowed Domains is:
*.youtube.com
Youtube is a single page application. It loads required parts via XHR without reloading the page.
You can use dom mutation events to detect changes.
I want to unblockui when stop loading page request is called.
dashboard: function(e,data) {
window.location = $("#dashboard-url").val()+"?trace_id="+data.id;
$.blockUI();
}
}
but before "window.location" page loads I press stop loading page in browser still UI is blocked.
is there any method with which I can unblock ui when stop loading page request is called.?
It is not possible to detect when the user cancel a page loading with javascript.
See this discussion: Detect when user clicks link, but aborts
I'm working on a web app with JQuery Mobile 1.2 and php. From the profile page, I have a popup asking the user to confirm logout. What I want to do is intercept that button with a click event to process the logout via an ajax request.
I have a custom.js file included in all my project pages. The app loads in the accounts page. I know it is getting loaded and working across the ajax navigation.
When I include this code in custom.js:
$("#perfil").live('pageshow',function(event){
alert('This page was just enhanced by jQuery Mobile!');
});
I get the alert when the profile page is shown. The problem is the click function.
When I include this:
$("#perfil").live('pageshow',function(event){
alert('This page was just enhanced by jQuery Mobile!');
$('#logoutButton').click(function(){
$('#output').html('Logging Out...');
$.get("api/logout",function(data){
if(data.success) {
window.location = "index"
}
else{
$('#output').html('Logout failed. Try again');
}
}, "json");
});
});
The behavior is odd. When I navigate from the main page to the profile page, I get the alert. But the button doesn't respond. However, when I refresh (or initially load the app from the profile page) the button behaves correctly and runs the the javascript logout function.
Here is the code for the html button:
<a id="logoutButton" data-role="button" data-icon="check"
data-inline="true" data-theme="e">Si, finalizar.</a>
Your custom.js on your profile page is not actaully getting loaded (more on that below), and as a result when you are binding the click event your button does not exist in the DOM, you can get around this by using event delegation for example
$(document).on('click', '#logoutButton', function(){
$('#output').html('Logging Out...');
$.get("api/logout",function(data){
if(data.success) {
window.location = "index"
}
else{
$('#output').html('Logout failed. Try again');
}
}, "json");
});
Now the reason why your custom.js isn't getting loaded is because by default when you load a page in jQuery Mobile the default behavior is to load just the data-role="page" div via ajax and attach it to the DOM of the current page. The important part to realize is that only the div page gets loaded, and not any other resources on that page.
If you want a custom script on a seperate page to be loaded you need to include it within the div data-role="page" wrapper. You can also tell JQM to fully load a page without ajax by using the data-ajax="false" attribute on your links (or rel="external" if its a different domain).
As a side point you should consider using .on instead of .live as of jQuery 1.7 .live has been depreciated.
In JQM, it all depends on how your data is initialized and how the pages are structured.
When loading your main page, all scripts are initialized once and cached for "Ajax" like response and feel.
If your main and profile page are in a multi-page format, your click button won't be an issue as the scripts are initialized once.
Or if you are in a single page, rel="external" from main to profile page will work. External links will force JQM to make a new HTTP request; However, you do loose page transition effects.
I believe a better architecture is to create single JQM pages and utilize a log-out button
Log-out as a binding function.
*How to bind your click function:
$('#foo').bind('click', function() {
alert('User clicked on "foo."');
});
Source