I'm curious as to how I'd get JavaScript to distinguish between two near identical pages which (as far as I can tell) have the same div's. An example of a page like this would be Google Home Page vs. Google Search Results. Is there anyway I can correctly identify which is which?
In that specific example, window.title will distinguish them. window.title isn't supported by Chrome, but document.title is. It works in Chrome, Firefox, and Opera on both Linux and Windows; Safari on Windows; IE6, IE7, and IE8 on Windows; and probably others as well.
More generally, window.location gives you the URL of the page, which is good for telling what page you're on; more on MDC. It's supported on every major browser I've ever seen, including the list above.
Since HTML5, you can edit the browser history. For example, you can change the current URL with window.history.pushState():
// pushState(state object, title, URL)
window.history.pushState({foo: "bar"}, "page 2", "bar.html");
This makes the user remain on exactly the same page, but changes the URL. This is happening on the current version of Google's homepage too, so the page is still the same.
You can retrieve the URL with window.location.
Related
Sorry about the odd title, I'm not sure how to phrase the question. Basically, I was wondering if it is possible open a new window and fill it with HTML from the front-end rather than code an actual route, db calls, etc. (Yep ultra lazy.) Thinking along these lines...
var html = '<!DOCTYPE html><body><h1>Y HALO THAR</h1></body>'
window.open(html);
Am I just wishing upon a star here? Is this even possible?
The first thing you need to do is make the popup have a variable -
var popup = window.open('blankPage.html');
var html = '<!DOCTYPE html><body><h1>Y HALO THAR</h1></body>';
popup.document.write(html);
Edit this answer no longer works because of security features implemented that block certain data: URIs.
See Open a new tab/window and write something to it? for working answer
There is the option to use a dataurl...
window.open('data:text/html,<!DOCTYPE html><body><h1>Y HALO THAR</h1></body>');
Data URIs are currently supported by the following web browsers:
Firefox and all browsers that use the Mozilla Foundation's Gecko rendering engine
Safari, Chrome and other WebKit-based browsers
Opera
Konqueror
Internet Explorer 8+ (with certain limitations)
The suggestion to do the following
window.open('data:text/html,<!DOCTYPE html><body><h1>Y HALO THAR</h1></body>');
no longer works on Chrome due depreciation of the 'data:' allowance.
https://developers.google.com/web/updates/2017/03/chrome-58-deprecations#remove_content-initiated_top_frame_navigations_to_data_urls
If you used this previously, your code will now open a blank window instead.
In Firefox version 13, bookmarklets (bookmarks with a javascript: URL, e.g. javascript: alert("it works") stopped working. Is there any solution to use javascript: bookmarks in Firefox 13?
This is a consequence of Bug 728313 - Using a bookmark keyword to a bookmarklet fails on new tabs, also Bug 739387 - Aurora 13a New Tab display doesn't allow javascript bookmarks to be selected . This bug affects Firefox 13 onwards.
As a consequence of the fix to bug 723808, javascript: bookmarks are disabled in a just-created new tab. If you first load almost any URL, including about:blank, then a Javascript bookmark will work in that tab.
Note that this is about Javascript bookmarks (bookmarklets). You cannot use this workaround to load javascript: URLs typed directly in the location bar. These have been disabled since Firefox 6, as a consequence of bug 656433 (phishing of javascript: URLs). Bug 680302 is a feature request to allow turning javascript: URLs back on through a preference. Valadrem has written the InheritPrincipal extension to remove this restriction (I haven't tested it). You can still type and run Javascript code in the Scratchpad (press Shift+F4, type code, press Ctrl+R).
There are restrictions on the Javascript you can run from the URL bar or from a bookmark. For example, since Firefox 7, you cannot resize the window (consequence of the fix to bug 565541); the services.sync.prefs.sync.dom.disable_window_move_resize controls this restriction.
NOTE: this solution no longer appears to work as of FF41. See JS Bookmarklets stopped working in Firefox 41.
If you first load almost any URL, including about:blank, then a
Javascript bookmark will work in that tab.
Since Firefox's default behavior for new tabs is about:newtab, which is nothing, and bookmarklets only run once something is loaded, you can do the following to set a default page, and then run bookmarklets:
open about:config
find browser.newtab.url
double-click and change from about:newtab to about:blank (or URI of your choice)
Ctrl-T and run bookmarklets in new tabs!
I have been able to use bookmarklets in recent versions of firefox (I just tested a few on FF23). Two suggestions:
Replace spaces with %20. For instance, try your example bookmarklet code with javascript:alert("it%20works") instead of javascript:alert("it works")
If this isn't enough, enclose the whole bookmarklet inside an anonymous function, so in your example, you'd write javascript:((function(){alert("it%20works");})())
I am currently trying to open another IE window using the code below, but the toolbar and menubar is still showing under IE7, it seems to work under IE8 though. Why is it doing this?
mywindow = window.open("dataviewer.aspx?id=" + id , "", "toolbar=no,location=no,directories=no,menubar=no");
I seem to recall having to add a website to my "trusted sites" list in IE7 to get the toolbars hidden. Of course that isn't going to help if you can't control that for your visitors, but I think it was something locked down as of IE7 -- even though MSDN doesn't state that. It might be an advanced setting, or maybe it was related to some 3rd party add-on or anti-virus I had. I just know I had a website that launched a small window that was meant to be a "floating toolbar" and it worked great in IE6, but once I upgraded to IE7 the width and height worked, but it had toolbars. I added that site to my trusted sites list, and it started working again.
If that is the case for you, I'd check the advanced security features and see what is different between normal and trusted sites, and maybe fine the one setting that controls this.
It works in IE7-mode in IE9. I don't have a machine with real IE7 installed.
The directories features is no longer supported. Just a guess, but that might be your problem.
One thing to try is to specify only "toolbar=no". Once you've specified to disable one of the features, the rest of them default to no. If you wanted no toolbars, but you did want an address bar, you'd have to explicitly say "location=yes" to get them back on. So, setting just one feature to no is good enough to turn the rest of them off as well.
Try this: http://jsfiddle.net/VD8sk/
mywindow = open("dataviewer.aspx?id=" + id , "", "toolbar=no");
Edit: Maybe also try "toolbar=no,menubar=no" without the other features specified.
I'm programming my own Ajax history library in JS. I ran into problems with IE6 and IE7. Can someone elaborate on why the following is happening?
IE6 & 7
I am able to set the hash values without refreshing the page.
window.location = 'site.com/index.html#' + pageNumber;
I can go to page 1, page 2, page 3, and so on. When I'm on page 3 and hit the back button, I'm not transported back to page 2. Rather, I get completely taken out of index.html! It seems like IE does not think that different hash values are different points in history.
IE7
IE8 in IE7 backwards compatibility mode claims that it has the onhashchange listener.
if ('onhashchange' in window) {
// true in IE7
window.onhashchange = someFunction();
}
However, IE7 never executes someFunction() when the URL changes. This implies that it lies about having onhashchange but never implemented it.
Have you try this: http://tkyk.github.com/jquery-history-plugin/
IE6 and IE7 are known to not support the hashchange event; it looks like you found a bug (?) in the IE7 compatibility mode of IE8.
You need to use a library, like the one in Phong Nguyen's answer, to emulate hashchange support via hidden iframes if you want to use this capability in those browsers. In many cases such libraries will also fix your back button problem; I know the one he linked to does.
Does anyone know of a script that I can use to automatically add a site to favourites upon clicking of a link for multiple browsers? Atleast Firefox, IE, Chrome would be good.
If not, is there a way I can simulate ctrl+D through Javascript as I know that keystroke adds a site to bookmark in most browsers?
A universal script for adding to bookmarks doesn't exists, because not all browsers expose an API for creating bookmarks. Generally, only IE exposes a direct API for this. Both Opera and Firefox offer a possibility to add a site to bookmarks that will be opened in the sidebar and that is a huge difference. Safari and Chrome also don't expose any API for this task.
Some more info on this topic
I use a small script to attempt adding a bookmark using the most popular window methods, until all have failed. Then it just prompts the user to manually add their bookmark...
Like others have said (above) some browsers prohibit script-activated bookmarking, and because of security they want only users to add bookmarks.
It is not perfect, but it is simple and works well.
function addBookmark()
{
var success=false;
// try each until all fail...
try {
window.external.AddFavorite(window.location, document.title);
success=true;
} catch(e) {}
try {
window.sidebar.addPanel(document.title,location.href,'');
success=true;
} catch(e) {}
if(!success)
{
alert("AUTO BOOKMKARING not supported\r\nIn your current browser.\r\n\r\nPress CTRL+D, or CMD+D\r\nto manually bookmark this page.");
}
}
You can check out this jquery plugin if you are using that or just look at their source if you want to use your own. Though he mentions on his compatibility that Safari and Chrome do not expose this functionality in their API.
http://www.dummwiam.com/jFav
See digitalinspiration.
1st Google result for javascript bookmark.
In internet explorer it works with:
window.external.AddFavorite(document.location,document.title);
in firefox and in opera with:
Some link name
I haven't found a solution for safari / chrome yet.