I would like to be able to do two things with html5 popstate, I'm not using any plugins just these two methods:
Push State:
function contentLoaded(...) {
...
window.history.pushState({ pageUrl: url }, url, url);
...
}
Pop State:
$(window).bind("popstate", function (e) {
if (event.state) {
loadContent(event.state.pageUrl);
}
});
Now if I delete a record, I want to avoid popping a state which couldn't be loaded, just skip it and try popping the next one.
The second question would be: How can I avoid try popping from an empty stack (I have a back button inside my app, but I can get rid of it with an appropriate reason), but keeping clear if the content couldn't be loaded OR if there is no more items in the stack.
History is not meant to be changed afterwards. You should separate the push/popstate functionality from the content loading functionality; think the "router" or "navigator" pattern in typical client-side mvc framework. If a state has become invalid, the content loading code can "redirect" to another state (by calling pushState), just as you would do in regular server-side app.
Just to remind, a client-side application should work identically whether the state was internally popped or the page was actually loaded using the same url, i.e. the HTML5 history support must be transparent, or in other words, the url alone must contain all the information to construct a particular view (but in the case of popstate, we can cheat and reuse the existing state to speed up things).
Related
Here is the website I am trying to access. I dont want the default tab (Day) though, I want to select the Season tab
https://www.eex.com/en/market-data/power/futures/uk-financial-futures#!/2017/05/23
The link appears to be exactly the same whichever tab is chose making differentiation impossible as far as I can tell.
Any help on this would be much appreciated, using whichever programming method and language is appropriate.
Kind Regards
Barry Walsh
The URL does not change since this is an ajax request, which you can see from MarketDataTableAController's getPageData function. You can read about them here https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
Ive inspected your html and you seem to be using angular. On further inpection you can see that the tabs have ng-click="setActiveTab(tab)" attribute on them. So whenever user clicks, this function gets executed. It is a matter of using this function with the appropriate tab object to get the content to change. You for example could put setActiveTab(tab) into your controller init method since setActiveTab() calls the forementioned getPageData() function to update the page.
Also the tab you are looking for is page.tabs[5] ($parent.page.tabs[5] if referring from TabController) since this is the tab with the label of season. Pass that to setActiveTab() and it should show you the season instead.
However this might not be a good solution since the tab array ordering might change. Then you would need to loop over all objects in page.tabs and see if tab.label === "Season" and pass that in the function instead or better yet use the $filter service provided by angular which would look more cleaner.
Your code source also seems to be minimized and its not very easy to read.
I would like to show my page action when the tab's URL doesn't contain a specified keyword.
This is an example showing a rule for a positive match for '.gif' in the pathSuffix.
chrome.declarativeContent.onPageChanged.addRules([
{
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { pathSuffix: '.gif' },
})
],
actions: [ new chrome.declarativeContent.ShowPageAction() ]
}
Is it possible to use this API to add a rule for when the page state doesn't match a certain string (e.g. to show the page action for all URLs except URLs with a specified suffix such as '.jpg')?
Unfortunately, no.
Then again, the purpose of declarativeContent is to offload the checking to native code when the condition is infrequent (as it's more efficient than invoking JS). Since your negative condition is bound to activate almost everywhere (so expensive actions will occur nevertheless), the gain is much lessened. You're better off listening to chrome.tabs.onUpdated.
Also, please note that an action that makes sense on all or most pages is, by Google guidelines, better off as a Browser Action and not Page Action:
Do use page actions for features that make sense for only a few pages.
Don't use page actions for features that make sense for most pages. Use browser actions instead.
I'm trying to use the history API but I can't get it working as I'd expect. I've look at several examples but they all appear to be doing something wrong. That is, this flow doesn't work as expected:
On new page call pushState
On popState load desired page
What I'm finding happens is that for #2 the URL is not modified to the old state (testing in Firefox). Unless I call pushState, or replaceState again the URL stays where it was. I'm also finding that somehow the first page ends up duplicated in the browser's history (holding down back I can see it).
How exactly should the history be used so that Back/Forward/Reload all work like a traditional page flow?
The problems I'm having relate to the use of an iframe in the page. Each change of the location of the frame creates a new history entry which messages with the desired history. To prevent this one must replace the iframe location instead of assigning a new one.
document.getElementById('content_frame').contentWindow.location.replace( new_path )
Location.replace doesn't create a history entry.
In a chrome extension, I've created tab properties that I'm trying to store with each tab. What is the best way to do this? I've looked into using localStorage, but it seems like there could be an easier way. The data is by no means permanent, it only exists as long as the tab does.
There's definitely no need to use localStorage. Without the notion "data is by no means permanent", one already knows that: tab IDs are unique within a session. From this fact, it follows that the data is non-persistent.
The best method to implement it is to maintain a hash of tab properties:
chrome.tabs.onCreated (optional, add initial info to tab hash)
chrome.tabs.onUpdated - (Add/) Update tab hash (URL is available)
chrome.tabs.onRemoved - Remove hash entry
Tab objects are not expensive: All properties are primitives (booleans, numbers, strings).
For instance (background page only):
var tabStore = {}; // <-- Collection of tabs
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
tabStore[tabId] = tab;
});
chrome.tabs.onRemoved.addListener(function(tabId) {
delete tabStore[tabId];
});
IMPORTANT ADDENDUM to Rob W's answer.
Make sure to also listen to tabs.onReplaced as well, and update the tabStore accordingly.
chrome.tabs.onReplaced.addListener(function(addedTabId, removedTabId) {
tabStore[addedTabId] = tabStore[removedTabId];
delete tabStore[removedTabId];
});
Chrome can change the id of a tab under the hood without warning or signs. As far as I know, the only place that this happens is the Google "instant search" when you type in a search into the address bar. It may be an edge case, but if you don't track this, it could end up being a very insidious problem.
I'm wracking my brain on this one.
After an HTML document loads in a browser, I want to be able to monitor
the page in case any content on it changes for any reason.
Is there a Javascript function with which I can track 'what has
changed' on the webpage. This should be irrespective of the type of content on the HTML page.
I have two examples for you to ponder on:
Ex1:
Say in an HTML document there are two select boxes s1 and s2.
The items list in s2 depends on selections in s1 (page is not
refreshed — that is, s2 is loaded through Ajax or something).
So after the HTML page loads I need to get a notification whenever s2
is populated...
Ex2:
Say, in an HTML page, there's a link, Onclicking which a light pop-up
div is created with some text.
How can I capture the content of this dynamic pop-up?
In all this discussion, I'm not taking into account any particular
format of HTML...the HTML content can be anything...I just need
to keep tracking if any content changes after the page loads...
Ideally I need to achieve this using JavaScript (client-side
scripting).
How can I achieve this?
You can keep track of changes in a textbox using onkeyup. This will tell you every time someone makes a change in a given textbox.
This could potentially fire alot of events. However, using onblur won't necessarily tell you about changes in the textbox and onchange's browser coverage is spotty at best.
If you are using AJAX, you could setup the response function to handle a home grown "event listening" system. So after the response does what it needs to do, it could call any methods that were registered with it, passing in the response text when necessary.
So from your examples above, in Ex1, when the AJAX returns from S1, it would load S2, then call a method saying S2 had changed. In Ex2, when the new AJAX returns the DIV's contents, after loading it into the DIV, it call a different method (or possibly the same depending on what your trying to do) and alerts it that the DIV has new contents.
You could set your "watcher" script as a timer, running a diff function on the current document.body.innerHTML and a stored version captured on load. Depending on how fast the diff will run will give you an idea on what timer interval to use.
This may not capture changes in form elements, but for those, it's easier to loop through all form elements in every form on the page.
Here's someone's diff function I found on Google: http://snowtide.com/jsdifflib