Problem exists only on FireFox (from 3.6 up to current 9), other browsers are fine. My code looks like this:
jQuery.extend({
AnchorFromUrl : function(url) {
var anchor = url.substr(1).replace('.html','');
$.fizzer_anchor = anchor;
window.location.hash = anchor;
return anchor;
}
});
The most weird thing is that if I place an alert before the window.location.hash = anchor; line, after clicking Ok favicon doesn't disappear, remove that alert() and you get your favicon disappearing.
Note: it also drops the favicon if you just do window.location = something.
I had the same problem, but found this interesting post and it worked for me, its just adding 2 lines of javascript.
The problem occure when the hash element changes, so, we need to re-stablish it via javascript
http://kilianvalkhof.com/2010/javascript/the-case-of-the-disappearing-favicon/
this is the code
function setFavicon() {
var link = $('link[type="image/x-icon"]').remove().attr("href");
$('<link href="'+ link +'" rel="shortcut icon" type="image/x-icon" />').appendTo('head');
}
Or (thanks to Mottie) using jQuery detach
$('link[type*=icon]').detach().appendTo('head');
It worked for me :
var link = document.createElement('link');
link.type = 'image/x-icon';
link.rel = 'shortcut icon';
link.href = 'FAV_ICON_URL';
document.getElementsByTagName('head')[0].appendChild(link);
Refer : Changing Website Icon Dynamically
I noticed this behaviour, too. Every now and then Firefox drops a favicon or it refuses to put the favicon alongside my bookmark. I think this is a Firefox bug.
To workaround this (and for other functionality), I installed the Favicon Picker add-on. Of course, this doesn't solve your problem on other computers, like clients and the like.
Related
Before I begin, this is NOT a duplicate. To explain my goal, I want a bookmark that, when clicked, changes the page icon WITHOUT loading a new tab. Other similar questions gave your bookmarklet an icon, but nothing accomplished what I wanted.
Here is the code I have right now:
data:text/html; charset=utf-8, <html><link rel="shortcut icon" href="http://link-to-my-icon.info/favicon.ico"></html>
It works, but it changes my tab. I want to keep the tab open, but edit the HTML to change the page icon. I've tried using
javascript: document.write(<link rel="shortcut icon" href="http://transparent-favicon.info/favicon.ico">);
as well, but it does absolutely nothing, while my first attempt at least changes the icon.
Any help would be greatly appreciated, thanks.
Checkout this gist and the demo.
//source: https://gist.github.com/mathiasbynens/428626
document.head || (document.head = document.getElementsByTagName('head')[0]);
function changeFavicon(src) {
var link = document.createElement('link'),
oldLink = document.getElementById('dynamic-favicon');
link.id = 'dynamic-favicon';
link.rel = 'shortcut icon';
link.href = src;
if (oldLink) {
document.head.removeChild(oldLink);
}
document.head.appendChild(link);
}
I am creating anchor tag in typescirpt file.on click of this button anchor tag gets created.It works in chrome & IE but not working in firefox.
btnGuest(){
var redirect = <HTMLAnchorElement>document.createElement("a");
redirect.href = 'https://www.google.co.in/';
redirect.target = '_blank';
redirect.click();
}
<button (click)="btnGuest()"></button>
finally i got the answer after creating element we need to append the element to the document body.here is the code.
https://support.mozilla.org/en-US/questions/968992
var redirect = <HTMLAnchorElement>document.createElement("a");
document.body.appendChild(redirect); //required in FF, optional for Chrome
redirect.href = 'https://www.google.co.in/';
redirect.target = '_blank';
redirect.click();
I am using document.write in a function to give different CSS to user's based on their choosing.
function blue() {
document.write('<link rel="stylesheet" type="text/css" href="http://ilam.irib.ir/documents/697970/237563314/blue.css" />');
}
I am calling the function from an anchor tag.
function color2(){
document.getElementById("navigation").innerHTML +='<a class="myButton" onclick="blue()" background-color:"#05c8f2";></a>';
}
As you can guess, when the link is clicked, the page clears out and I get a blank page.
Is there any way to fix this problem? I don't want to stop page refreshing, I'm just trying to fix the problem in any way possible!
Note: don't ask why I'm adding code using JavaScript, and not directly into HTML code. This site is a large scale system and we just have access to JavaScript and CSS. So this is all we can do to edit our pages.
document.write rewrites the body , as a result the only thing in your document remains is the css file you added and hence it is blank.
View this
Code from above link :-
var cssId = 'myCss'; // you could encode the css path itself to generate id..
if (!document.getElementById(cssId))
{
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.id = cssId;
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'http://website.com/css/stylesheet.css';
link.media = 'all';
head.appendChild(link);
}
Instead of rewriting while dom , we append the link element inside head tag
I have another site running inside a webpage as an iframe. However it's not displaying the favicon. I think it's not possible but just wanted to double confirm if someone knows of a way.
May be something like this in your child page i.e. page inside iFrame :
(function() {
var link = parent.document.createElement('link');
link.type = 'image/x-icon';
link.rel = 'shortcut icon';
link.href = 'http://www.stackoverflow.com/favicon.ico';
parent.document.getElementsByTagName('head')[0].appendChild(link);
}());
You can set a favicon by modifying the HTML, i.e. by adding:
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
to the <head> (or changing the existent link).
You can also access DOM of the top document if both the top document and the iframe are on the same domain.
Example:
master = window.parent.document;
head = master.getElementsByTagName("head")[0];
favicon = master.createElement("link");
favicon.rel = "shortcut icon";
favicon.type = "image/png";
favicon.href = "//cdn.sstatic.net/stackoverflow/img/favicon.ico?v=038622610830";
head.appendChild(favicon);
sets the icon of the page to Stack Overflow favicon.
Why document.styleSheets[0].href doesn't get updated but document.getElementsByTagName('link')[0].href does, when I dynamically create a <base/> tag?
On Opera it works fine, but Firefox and Chrome don't update the value.
Here is the code, you can run it on http://jsfiddle.net/XcDCk/.
If you don't run it on jsfiddle.net you must add a linked stylesheet (<link rel="stylesheet" type="text/css" href="styles.css"/>)
var base = document.createElement('base');
base.href = 'http://google.com/';
document.getElementsByTagName('head')[0].appendChild(base);
var link = document.getElementsByTagName('link')[0];
alert('Link: '+link.href);
var styleSheet = document.styleSheets[0];
alert('Stylesheet: '+styleSheet.href);
var hojaEstilos = document.styleSheets[0];
alert('Stylesheet + ownerNode: '+hojaEstilos.ownerNode.href);
I could get it done (on the third alert) by using the ownerNode attribute (which is actually the link element, so I can get the same result as the first alert), but I can't understand why the second alert doesn't work.
Thank you