How to make the favicon appear in a new window?

问题

I'm opening a new window into which I'm injecting HTML for both the body and the head. The problem is in the head section: the HTML includes both the title and the favicon but the favicon doesn't show. This is the code and the jsFiddle: https://jsfiddle.net/ufnjspgc/

function Start() {

  $('#TheButton').click(function() {

    var TheHeadHTML = '<link href="' + window.location.protocol + '//' + window.location.host + '/favicon.ico" rel="icon" type="image/x-icon">';
    TheHeadHTML = TheHeadHTML + '<title>Title Works</title>';

    var TheNewWindow = window.open();

    $(TheNewWindow.document.head).html(TheHeadHTML);
  });
}

$(Start);

How do you make the favicon appear in the new window?

回答1:

You can open a new window using a data URI. Here's the code:

<input type="button" value="test" id="TheButton" />

function Start() {

  $('#TheButton').click(function() {
    var TheNewWindow = window.open("data:text/html;charset=utf8,<html><head><link href='" + window.location.protocol + "//" + window.location.host + "/favicon.ico' rel='icon' type='image/x-icon'><title>Title Works</title></head><body></body></html>");
  });
}

$(Start);

And the fiddle.

Basically, data URIs allow you to specify the content in the URL itself such that it doesn't need to go to a server, or, in your case, to the "about:blank" resource browsers (must) have. "about:blank" can cause a lot of problems when scripting because of cross-origin and other concerns.

As noted by @ConnorsFan, this technique does not work in IE. As indicated in this question by Diego Mijelshon, IE does not allow navigation to a data URI, and thus it cannot be used as the URL for a new window. Seems to work fine in recent versions of Chrome and Firefox. I'm afraid I don't have a copy of Safari on which to test.

回答2:

If the favicon is from your own Web site, you can create a print.html template page that contains the favicon link (with an id attribute):

<!DOCTYPE html>
<html>
<head>
    <link id="favicon" rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
</body>
</html>

When the button is clicked, you open that page and inject the additional content in the head and body sections. According to my tests, the presence of the favicon link in the DOM is a good indicator to determine when the page content can be modified. For Chrome and Firefox, the changes can be made in $(wnd).load(). For Internet Explorer 11, they can be made in $(wnd.document).ready().

$("#btnOpenWindow").click(function () {
    var done = false;

    // Open the window with the empty page
    var wnd = window.open("print.html");

    // For Chrome and Firefox
    $(wnd).load(function () {
        injectContent();
    });

    // For Internet Explorer
    $(wnd.document).ready(function () {
        injectContent();
    });

    function injectContent() {
        // If the favicon link is loaded in the DOM, the content can be modified
        if (!done && $("#favicon", wnd.document).length > 0) {
            done = true;
            $("head", wnd.document).append("<title>The window title</title>");
            $("body", wnd.document).append("<h1>Main title</h1>");
            ...
        }
    }
});

If you really need to modify the favicon of the new window, you can use the same method as above, with the following changes:

<link id="favicon" rel="shortcut icon" type="image/x-icon" />

function injectContent() {
    if (!done) {
        var $favicon = $("#favicon", wnd.document);
        if ($favicon.length > 0) {
            done = true;
            var faviconUrl = window.location.protocol + "//" + window.location.host + "/favicon.ico";
            $favicon.attr("href", faviconUrl);
            $("head", wnd.document).append("<title>The window title</title>");
            $("body", wnd.document).append("<h1>Main title</h1>");
            ...
        }
    }
}

回答3:

As an alternative, and alhough this is a bit heavy, you can set the favicon via JavaScript by injecting code in TheHeadHTML. If you don't want to bother with JS/favicon nitty-gritty, you can use a library such as favico.js.

回答4:

You should dynamically change the URL using a URL parameter as a cache busting method. I have seen browsers hold onto favicons for a long time even after the icon had been changed without a cache busting method.

'<link href="' + window.location.protocol + '//' + window.location.host + '/favicon.ico?v=' + Math.round(Math.random() * 100000) + '" rel="icon" type="image/x-icon">';

回答5:

$(TheNewWindow.document.head).append(TheHeadHTML);

回答6:

here's an answer which i think would help you

html :

<a id="link" href="#">Click me</a>

javaScript - jQuery (actually)

$('#link').click(function(){
  var goto = window.open('http://stackoverflow.com/questions/40177033/how-to-make-the-favicon-appear-in-a-new-window');
});

回答7:

I possible, Inject your html any way you like, however in the window.open(); give a valid url to an empty page on your server window.open("/myTinyPage.html");.This way you can still inject your html hover the page comes from the server and has a favicon. You pay ping time, however code is simple.

来源：https://stackoverflow.com/questions/40177033/how-to-make-the-favicon-appear-in-a-new-window

标签

javascript

favicon