We have a custom session mechanism in our application, that allows user to have different session (e.g., different credentials) in each browser tab, even if URLs are the same. This mechanism works great in all major browsers including IE (v11).
The problem
We want to supply each browser tab with different favicon (with different color) to indicate which tab belongs to which session. To do that, we set different favicon URL depending on session using
<link rel='icon' href='url_to_favicon_session_id' type='image/ico'/>
It works great in Firefox and Chrome, however IE seems to share favicon between all tabs pointing at the same URL (icon is the same in each tab, order of loading determinates favicon visible in each tab).
The question
Can we force IE somehow to not share favicons across browser tabs with the same URLs?
Note, changing URL is not an option here.
Minimal Working Example
Below full code snippet to reproduce problem (put it on a webserver to run in IE with HTML5 support; Open this file in many tabs of the same browser).
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script type="text/javascript">
var icons = [
"http://google.com/images/google_favicon_128.png",
"https://assets-cdn.github.com/favicon.ico",
"https://www.microsoft.com/favicon.ico?v2",
"https://s.yimg.com/rz/l/favicon.ico",
"http://www.stackoverflow.com/favicon.ico",
];
var idx = localStorage["favicon"];
if (idx === undefined) {
idx = 0;
} else {
idx = parseInt(idx);
}
localStorage["favicon"] = (idx + 1) % icons.length;
var link = document.createElement('link');
link.type = 'image/x-icon';
link.rel = 'icon';
link.href = icons[idx];
document.getElementsByTagName('head')[0].appendChild(link);
</script>
</head>
<body>
Open this page in multiple tabs. Favicon should be different in each tab.
</body>
</html>
In my experience, IE, along with almost all other browsers, uses a cache mechanism separate from the cache of the page to prevent constant retrieval of favicons. This means that changes to the favicon can be unpredictable unless the url is changed and the cache for the domain cleared. The only reliable way I can see around this is to add a unique id to identify the tab for each session forcing IE to cache each sessions's icon separately.
You can try a GET variable (i.e. yoursite.com/page?sessionid), however, in my experience, IE still cache's the favicon across page in the same domain regardless of GET variable. In fact, Microsoft's documentation says that you can use the link tag to get different pages to have different favicon's, however, I often find that IE's favicon cache won't update even if you change the link tag without clearing the cache. Also, IE won't display a favicon at all if you have all caching turned off. And, it appears that in some versions of IE, the link tag doesn't take precedence over whatever favicon is at the default location either.
I have had some success with using a routing script to get requests to the right page and then appending the sessionid as part of the path (ie. yoursite.com/page/sessionid), however. This requires a bit of extra work in your routing script to ignore the sessionid but it is the only thing, in my experience, that worked simi-reliably to get IE to recognize different favicon's for different sessions.
Related
I am facing an issue:
I need to do html meta refresh (because I do windows gadget, this is only thing what works in Internet Viewer (not Internet Explorer), there is no location.href or anything similar (it always opens in new windows instead of currect gadget windows).
Therefore onhly HTML meta refresh works to link a page.
So I was tweaking the JS to have a variable into the meta refresh, and it works only in chrome, but it doesnt work in ordinary Internet Explorer... once I make it work in IE, it shall work in gadget windows too.
How to adapt this code to work on Internet Explorer (if you have a chance to try it out in Internet Viewer, would be even better).
<html>
<head>
</head>
<body>
<meta http-equiv="refresh" content="5;url=http://www.google.com">
<script>
var username = "jzaloudek";
var url = "http://localhost/excel/test.php?name=" + username;
var time = 5;
document.getElementsByTagName("META")[0].httpEquiv = "refresh";
document.getElementsByTagName("META")[0].content = time + ";url=" + url;
</script>
<p>Loading...</p>
</body>
</html>
I'm seeing different behaviour with calls to window.open() when running Internet Explorer as an administrator. I'm not able to reproduce it in a sanboxed iframe environment like jsfiddle/codepen etc. but I'll do my best to explain the issue here.
In IE, not running as an administrator, when I press the button "Empty" it makes a call to window.open("", windowname, ...) and a new blank window appears. Next I press the button "Full" and it makes a call to window.open("http://www.google.com", windowname, ..) and what was the old blank window gets set to Google.
In IE, when running as administrator, the initial blank window isn't overwritten. Instead a new window with Google appears next to the blank window.
I've included my test code below. I'm not sure if the fact that it's in an iframe is relevant but I'm including it just in case
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<iframe src="http://127.0.0.1:8888/">
</iframe>
</body>
</html>
Where the source at http://127.0.0.1:8888/ looks like
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var windowname = "TESTWINDOW";
var features = "menubar=no, location=no, resizable=yes, status=yes, width=500, height=500";
function doEmpty(e) {
window.open("", windowname, features);
}
function doFull(e) {
window.open("http://www.google.com", windowname, features);
}
</script>
<style>
body {
width: 1000px;
height: 1000px;
}
</style>
</head>
<body>
<button onclick="doEmpty()">Empty</button>
<button onclick="doFull()">Full</button>
</body>
</html>
The behavior of window.open() depends on a few things, especially in Internet Explorer.
Since you are providing a width/height param the browser should open your new window as a popup (if you've got the settings set to allow that) - if you remove the width/height browsers will often open in a new tab instead.
Since your windowname is re-used, and does not contain spaces or hypens, the browser should re-use the same window instance for both. (if you had spaces or hyphens IE would choke and not open the popup (known IE bug)).
"TESTWINDOW" is likely unique enough for this, but also be aware that IE has a bug where if you have another site that tries to call window.open() and they use the same window name as you/your site, the browser will re-use that popup window. IE doesn't properly "namespace" them to a domain (known bug).
Now at one point (IE7/8?) Microsoft changed some behaviors around launching a window with a location of "" (empty string), and/or "about:blank", or "javascript:;" or "javascript:void;" etc. such that they were not trusted at the same level as the domain that opened them. You may be experiencing an issue related to that. (If you use 2 different, but "real" URLs I'd be curious if the behavior is better).
Since the new popup window is a named window, if the iframe or it's parent has a name of "TESTWINDOW" you will get some weird results too.
Finally you indicated that you get different results depending on the logged in user. Since the settings in IE are per user, you may very likely be seeing different settings in action. e.g. does one of your profiles have your domain (or localhost) in the compatibility mode list? or does one of your profiles have different popup blocking rules or privacy settings?
Try another way, wihout using window.open()
there is : Alertify JS a good library for messages.
just include the js and css files :
<script src="PATH_TO_FILE/alertify.min.js"></script>
<link rel="stylesheet" href="PATH_TO_FILE/alertify.css" />
<link rel="stylesheet" href="PATH_TO_FILE/alertify.default.css" />
here is an example :
alertify.alert("Message");
there is a lot of ways like : prompt, confim, log, success, ...
Try it :)
We have developed an offline HTML application - basically a collection of HTML pages with some JS and CSS resources (external files that are referenced in HTML page) to support it.
To run this app, all the client (customer) needs to do is to just open the "LandingPage.html" file in his IE Browser (client will only be using IE).
Recently the client asked for the application to be designed such that it automatically opens in full screen mode. So they don't want to be asked to press F11.
We implemented this using the many different JavaScript solutions available - but all of them use ActiveX / cause the security prompt to appear which the user has to acknowledge.
We cannot recommend the user to go and change the IE Security settings related to Active X Objects / Scripts / Initialization etc - that suggestion isn't well received.
The client wants the application to open in full screen -
Without showing any prompt / asking for acknowledgement
It should be automatic / it should not require user to press F11 or any other button.
They don't want the page to be opened in another window (we demo-ed the window.open solution too ... ) either.
Any suggestions to achieve this functionality? I know there are too many constraints ...
You may use a Launcher for the IE (may be some script or a HTA-file as well)
Example-HTA:
<html>
<head>
<hta:application
showintaskbar="no"
singleinstance="yes"
sysmenu="no"
windowstate="minimize"
>
<script>
IE = new ActiveXObject("InternetExplorer.Application") ;
IE.Visible = 1 ;
IE.navigate( "file://C:/path/to/LandingPage.html" ) ;
IE.TheaterMode=true;
//close HTA
self.close();
</script>
</head>
<body></body>
</html>
When you want to use it as script copy the first 4 lines of the <script/> into a file with the ending .js
I am currently using the following JS code to trigger a file download without leaving the page I'm on:
var iframe = document.createElement('iframe');
iframe.style.display = 'none';
document.body.appendChild(iframe);
iframe.src = "/somefile.zip";
It works well pretty much everywhere I tested except on both the stock Android browser and Dolphin, where the download doesn't start at all. So far so good, after some research this hidden iframe trick happens to be known not to work on the Android browser.
But I tried several other methods to trigger the download on the Android browser, including window.open() (not reliable because popup blocking is enabled by default), or <a target="_blank"> with a simulated click() (which from a popup blocker perspective amounts to window.open() and gets blocked), or document.location = ... which downloads the file but breaks my app.
The problem with the latter document.location = ... is that this is a Comet application (server-push / long polling) so I really can't leave the page I'm currently on (and "leaving" includes changing document.location even for a file download, even if apparently the browser stays on the current page) otherwise the long polling connection is stopped and the updates stop, the app breaks. This obviously also applies when clicking normal links, either manually or simulated.
So in order not to break my app I really need to trigger a file download without leaving the page I'm on. Unfortunately I didn't find any viable solution that also works on the stock Android browser.
Any ideas?
Thanks for reading me.
Try using the anchor and simulated click without using a target=blank
I say this because I had a similar download consisting of an iframe and a simple link as fallback. The iframe worked on everything but the android, but the simple link would download successfully without leaving the page.
I have a bookmarklet that launches a window.open javascript function to open a small window with my bookmarklet -- an external feature used to communicate between any visted site and my server. I'd like for a favicon to show up when the bookmarklet is added to the bookmark toolbar. I realize that the bookmarklet is javascript, there is no domain tied to it so it's going to be either difficult or impossible to achieve this goal.
My understanding of the problem:
Favicons are easy to understand, a link within the head of an HTML doc. The browser can pull this when bookmarking an actual site by reference. However, as you see my bookmarklet is ran off a javascript launch code where there exists no HTML, therefor no link to a favicon. I'm not ready to give up yet though, I feel that there's some injection that can be made...
As of now, the bookmarklet launch code looks like this:
Current Script -- bookmarklet, no favicon (note all code is formated with line breaks -- won't work in all browsers, normally its one line)
javascript:void(window.open(
'http://mydomain.com/bookmarklet/form?u='
+encodeURIComponent(location.href)+
't='+encodeURIComponent(document.title),
'test','status=0,toolbar=0,location=0,menubar=0,
resizable=false,scrollbars=false,height=379,width=379'
));
The closest thing I've found to a solution is as follows, but it doesn't open a new window -- just creates a new tab with the html as the page:
Working favicon, no bookmarklet window
javascript:'<!DOCTYPE html>
<html><head>
<title>Hello World</title>
<link rel="icon" type="image/png" href="http://www.tapper-ware.net/devel/js/JS.Bookmarklets/icons/next.png" />
</head>
<body>Hello World</body>
</html>';
I have tried a combination of the two but it didn't seem to use the icon. I'd be curious to know if anyone can see a type of workaround.. I think it could be possible, I just don't think it's set up correctly as I've been trying.
My hybrid of the two -- bookmarklet but no favicon
javascript:'<!DOCTYPE html>
<html><head>
<title>Hello World</title>
<link rel="icon" type="image/png" href="http://www.tapper-ware.net/devel/js/JS.Bookmarklets/icons/next.png" />
</head><body>Hello World</body></html>';
window.open('http://mydomain.com/bookmarklet/form?u='
+encodeURIComponent(location.href)+
'&t='+encodeURIComponent(document.title),
'test',
'status=0,toolbar=0,location=0,menubar=0,resizable=false,
scrollbars=false,height=379,width=379').void(0);
What I did was use the html structure before firing window.open(), this successfully opened my bookmarklet in a new window, but no favicon showed up for the bookmark icon.
Logical Solution:
My thoughts on this would be to have the bookmarklet point to a page that is simply an HTML file with a favicon link and the launch script in the <head>. However, I don't want this opening in a new tab with a blank HTML file that then launches a popup.. Workaround..?
There exists a similar question but I did not seem to find the answer I'm looking for:
How to have favicon / icon set when bookmarklet dragged to toolbar?
Source for the working javascript favicon (no bookmarklet however):
http://www.tapper-ware.net/blog/?p=97
I'd be interested in what your current knowledge/thoughts on this would be
I tried and retried, and my first conclusion was: "It can't be done (at least not in FF4 on Ubuntu 11.04)". You need (I guess) a simple solution for your site visitors (drag&drop, add bookmark with 1 click ...).
I have found a workaround, it does it's job, but it is a little buggy (maybe someone can help fix it).
PROS:
add a icon to the bookmarklet
it uses windows.open
doesn't leave empty pages behind
CONS:
it reloads the current page (instead of leave a page behind)
Can't make Firefox POP-ul blocker allow "javascript:" generated HTML page to load POP-ups, so you need to hit allow every time
This is the code:
Bookmarklet
This is a link that you put on your page, the user needs to drag&drop this link to the bookmark bar (you can use something like Add Bookmark Script for adding it as a bookmark with 1 click), The bookmark has no icon until the user click's it at least once.
So how it supose to work:
1. redirect the user to the generated HTML page from the bookmarklet (that makes the ICON posible)
2. onLoad open the window you need using "windows.open"
3. redirect the page back using "history.back(-1)"
In theory everithing happens so fast, that the user does't see the new page, just that the current page is reloading, and a new windows appear.
The problem:
1. I use setTimeout for history.back beacause window.open is blocked by Firefox, so I need to click allow every single time (if somebody can fix this ... we have a chance of using this, develop it further :) )
I know THIS is not a reliable solution, but this is the only solution I've got so far.
Hope this helps a little. :)
Some of the things that I've tried that might possibly get you going a bit more:
Append a new link element to the current document:
javascript: var newLink = document.createElement('link');
newLink.setAttribute('rel','icon');
newLink.setAttribute('type','image/png');
newLink.setAttribute('href','http://www.tapper-ware.net/devel/js/JS.Bookmarklets/icons/next.png');
document.querySelector('head').appendChild(newLink);
void(0);
Note that I was using the querySelector due to IE testing (though works in modern browsers as well). With Chrome and FF, I kept getting invalid character when trying to create the element, so I had to do piecewise attribute setting.
Tried using base64 encoded image string using the "data:image/png;base64,iVBORw0KGgoAAAA..." URI schema, but that didn't help anything due to the fact that I still had to set it to the current HTML text (which I could do, but ran into the same problem as you above of no bookmarklet).
Maybe this can't be done due to cross site scripting concerns? Not sure... Either way, really curious to see what you come up with (if you manage to come up with anything).
"I don't want this opening in a new tab with a blank HTML file that then launches a popup.. Workaround..?"
If what you after really is the visual effect, you can try launch the blank HTML in hidden iframe, then launch the javascript.
Hope that helps