发表新帖
发表新帖

How to make the favicon appear in a new window?

后端 未结
关注
7 1553
无人共我
无人共我 2021-01-17 22:17

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

相关标签:
7条回答
  • [愿得一人]
    2021-01-17 22:59

    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.

    0 讨论(0)
  • 南笙
    2021-01-17 23:00

    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>");
            ...
        }
    }
}
    0 讨论(0)
  • 无人共我
    2021-01-17 23:00

    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.

    0 讨论(0)
  • 半阙折子戏
    2021-01-17 23:02

    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');
});
    0 讨论(0)
  • 自闭症患者
    2021-01-17 23:04

    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">';
    0 讨论(0)
  • 没有蜡笔的小新
    2021-01-17 23:09

    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.

    0 讨论(0)
 看不清?
提交回复
热议问题