简体   繁体   中英

Can I display favicon from inside an iframe?

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 ie 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, ie 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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM