Here's my situation:
I have two pages. I use this line of code to execute things when a user changes between the two pages. It works, but only when I am loading a page for the first time. If I am returning to a previous page (one that I already visited), it doesn't call this method.
$('div:jqmData(role="page")').live('pagebeforeshow',function(){ ... });
For example:
I visit page A; the code executes.
I click a link on page A to go to page B; the code executes.
I click a link on page B to go back to page A; the code DOES NOT execute.
I then refresh the page (now on page A), the code does again execute.
Any reason why that would happen?
Here is a demonstration I made for you to show when events fire for pages in the jQuery Mobile framework (version 1.0): http://jsfiddle.net/jasper/QjtZW/1/
When you navigate to different pages the pageshow event always fires on the page being shown as you can see in my example.
If you are having issues with pageshow firing as it should then you probably have an error or some errors in your code that are blocking code from running. Make sure your error console is clear.
Related
I am trying to run some code that refreshes the webpage, and THEN does the console log.
The issue is the console.log is happening before the page reload.
location.reload();
console.log("test");
How do I adjust this to get the desired behavior?
The very act of refreshing a web page ends execution of scripts on that page, apart from what might be called in onbeforeunload or onunload handlers. Once the reload has actually occurred, no more JavaScript in the pre-reload page can be executed.
If you need to cause something to happen after content has been reloaded, you'll have to use something like a cookie to pass a message to the reloaded page indicating the action you want to take.
Use extentions like TamperMonkey to handle your script.
I am using WebdriverIO with Javascript and Mocha to create a UI test framework. For that, I am trying to capture screenshots every time a page loads or a page refreshes. Could someone please tell me if this is possible to do it using WebdriverIO or otherwise?
Relevant details: The pages are NOT loaded using driver.url() all the time. The launching URL is arrived at using driver.url(), and then on all navigation happen by clicking on a link on a page or performing an action that leads to another page load. Please also note that page load happens on other conditions as well, for example, when a "Save" button is clicked the same page loads again (refreshes). I am trying to capture a screenshot every time a page loads or refreshes irrespective of whatever action that might cause it. And that's why I want to abstract out the process at a global level than calling driver.saveScreenShot() in multiple places all over the codebase.
I have two questions,
first question: why is browser action fired when I open the browser or open a new tab(not only when I click)?
Another question is: my extestion changes all website colors, but when the website gets more information (such as facebook) after the browser action is fired, this can not be changed?
what can I do to make the browser action always change all the news too?
my background.js is:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({
file:"content.js"
});
});
and my content.js starts with:
$(document).ready(function(){
hauptProg();
});
The answer on your second (and main) question depends ... on how the destination page has been implemented. There is no general answer, only a few suggestions
You can work with MutationObserver to find out when the content of the elements has changed. You could then execute your code again
Maybe you can see that, let's say, two seconds after page load the additional content has been loaded. Then you could start a timeout with window.setTimeout(yourMethod, 2000) to executed your method after 2 secs
When I ran the following two JavaScript commands...
> window.history.back(); alert("2nd");
...I was expecting the window to go to the previous page, and then display the alert. What happens is "2nd" actually pops up first, and then the window goes back. If I reverse them like this...
> alert("2nd"); window.history.back();
...the commands still execute in the same order. What don't I understand about JavaScript control flow? How would I get window.history.back(); to run first?
Well, it makes sense that the alert is not displayed after the other page has loaded. The script is part of the loaded page, so if that would work, it would mean you could inject javascript in the previous page, which is of course undesirable.
So as I see it, there are 3 possibilities:
The back function is blocking and works immediately, navigating to a previous page, and terminate the running script. This obviously isn't happening, otherwise you wouldn't get the alert at all.
The back function works immediately, but the script is only terminated when the browser has enough information to start loading the other document. This doesn't seem to be the case. If it were, the browser would probably load the document in the background while the alert is open, but that doesn't happen.
The back function just signals the browser to go back, and the script keeps running until it's idle before that request is actually fulfilled. This seems to be the case. Navigation only starts when the alert is closed and the script ends. (At least in Chrome).
Anyway, if you want this to work, you'll have to call alert from the page you are navigating to.
Control has to be given back to the browser before back is actually executed. It just tells the page when you get a chance, go back.
Once control is return the browser unloading hooks are called (onbeforeunload, onunload, browser specific events).
i have an index.html file that holds:
document.addEventListener("deviceready",onDeviceReady,false);
function onDeviceReady(){
var deviceuid = device.uuid; // gets the phoneid
alert('index');
checkUser(deviceuid); // this is some function i made
}
from here if everything works OK i will load another page called page1.html that has some text and a link:
Page 2
the page2.html has some other text and a link that goes back to the homepage:
Go to Index
What happens is that when i start the application i can see the alert and the other script running, but when i click on the link to go back to the index.html the page goes blank and no alert is shown
any ideas ? do i have to run some other code that refreshes the page?
edit:
i could use: <a href="#" onClick="document.location = 'index.html';" >Go To Index</a>
but it doesn't seem to work on the mobile device only in browser
You are describing standard browser behavior.But jQuery mobile performs page loading default per AJAX, see http://jquerymobile.com/demos/1.0.1/docs/pages/page-links.html.
This means that the first page ("index.html") is loaded and onDeviceReady is executed. When you click the link to the second page ("page2.html") this page is loaded per AJAX, is inserted into the DOM of the first page and is displayed.
When you click on the link to the first page, no loading occurs because both pages are in the DOM and the first page is displayed again without triggering onDeviceReady - this only happens on the first load.
You can turn off AJAX loading when you add to every link rel="external".
However, you should use AJAX loading and its advantages. Read http://jquerymobile.com/demos/1.0.1/docs/pages/page-scripting.html - it explains in detail when a script is executed. I think you should put your code in the pagechange- or pageshow-event, see http://jquerymobile.com/demos/1.0.1/docs/api/events.html.