如何使图标出现在一个新的窗口

How to make the favicon appear in a new window?

本文关键字：一个 窗口 图标 何使      更新时间：2023-09-26

我正在打开一个新窗口，我正在为body和head注入HTML。问题是在标题部分:HTML包括标题和网站图标，但网站图标不显示。下面是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);

如何使图标出现在新窗口中?

您可以使用数据URI打开一个新窗口。下面是代码:

<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);

还有小提琴。

基本上，数据uri允许您指定URL本身的内容，这样它就不需要转到服务器，或者(在您的情况下)转到浏览器(必须)拥有的"about:blank"资源。"about:blank"在编写脚本时可能会因为跨域和其他问题而导致很多问题。

正如@ConnorsFan所指出的，这种技术在IE中不起作用。正如Diego Mijelshon在这个问题中指出的那样，IE不允许导航到数据URI，因此它不能用作新窗口的URL。在最新版本的Chrome和Firefox中似乎运行良好。我恐怕没有Safari的副本来测试。

如果favicon来自你自己的网站，你可以创建一个print.html模板页面，其中包含favicon链接(带有id属性):

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

当单击该按钮时，打开该页面并在头部和正文部分注入额外的内容。根据我的测试，DOM中图标链接的存在是确定何时可以修改页面内容的一个很好的指标。对于Chrome和Firefox，可以在$(wnd).load()中进行更改。对于Internet Explorer 11，它们可以在$(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>");
            ...
        }
    }
});

如果你真的需要修改新窗口的图标，你可以使用与上面相同的方法，做以下修改:

<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>");
            ...
        }
    }
}

作为另一种选择，虽然这有点重，但您可以通过JavaScript通过在TheHeadHTML中注入代码来设置图标。如果你不想为JS/favicon的细节而烦恼，你可以使用像favicon . JS这样的库。

您应该使用URL参数作为缓存破坏方法来动态更改URL。我曾见过浏览器在没有缓存破坏方法的情况下，即使图标已经更改，也会很长时间保留图标。

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

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

我有一个答案，我想对你有帮助

html: 

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

javaScript - jQuery(实际)

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

我可能，注入你的html任何你喜欢的方式，但是在window.open();给一个有效的url到你的服务器window.open("/myTinyPage.html");上的空页面。这样你仍然可以注入你的html悬停页面来自服务器，并有一个favicon。您需要支付ping时间，但是代码很简单。

相关文章：