Question

我打开一个新窗口，我正在为身体和头部注入HTML。问题出在头部：HTML包括标题和favicon，但是favicon没有显示。这是代码和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);

如何让favicon出现在新窗口中？

Answer 1

您可以使用data 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);

the fiddle。

基本上，data URI允许您在网址中指定内容，以便它不需要转到服务器，或者在您的情况下，转到"about:blank"资源浏览器（必须）拥有。＆＃34;关于：空白＆＃34;由于跨域和其他问题，在编写脚本时可能会导致很多问题。

如@ConnorsFan所述，这种技术在IE中不起作用。由in this question，Diego Mijelshon指示为IE does not allow navigation to a data URI，因此不能将其用作新窗口的网址。似乎在最新版本的Chrome和Firefox中运行良好。我担心我没有可以测试的Safari副本。

Answer 2

如果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中的favicon链接的存在是确定何时可以修改页面内容的良好指标。对于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>");
            ...
        }
    }
}

Answer 3

作为替代方案，虽然这有点重，但您可以通过在package com; import javax.ws.rs.Consumes; import javax.ws.rs.GET; import javax.ws.rs.POST; import javax.ws.rs.Path; import javax.ws.rs.Produces; import javax.ws.rs.core.MediaType; @Path("Hi") public class Resource { @GET() @Produces(MediaType.TEXT_HTML) public String x() { return "HI HI"; } @POST() // @Consumes(MediaType.APPLICATION_FORM_URLENCODED) @Produces(MediaType.TEXT_HTML) public String x1() { return "HI HI post normal"; } @POST() @Consumes(MediaType.APPLICATION_JSON) @Produces(MediaType.TEXT_HTML) public String x2(Pojo p) { return "HI HI post jason" + p.getName(); } }中注入代码来设置favicon。如果您不想打扰JS / favicon的细节，可以使用favico.js等库。

Answer 4

您应该使用URL参数作为缓存清除方法动态更改URL。我已经看到浏览器长时间保留favicon，即使在没有缓存清除方法的情况下更改了图标之后。

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

Answer 5

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

Answer 6

这是我认为可以帮助你的答案

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

Answer 7

我可能，以您喜欢的方式注入您的HTML，但是在window.open();中为您的服务器window.open("/myTinyPage.html");上的空白页提供有效的网址。这样您仍然可以将html注入页面来自服务器并有一个favicon。你支付ping时间，但代码很简单。

如何让favicon出现在新窗口中？

7 个答案: