我正在打开一个新窗口，我正在为身体和头部注入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);
如何让favicon出现在新窗口中？
您可以使用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);
基本上，data URIs允许您在URL本身中指定内容，使其不需要转到服务器，或者在您的情况下，转到"about:blank"资源浏览器（必须）。由于跨域和其他问题，“about：blank”在编写脚本时会导致很多问题。
正如@ConnorsFan所指出的，这种技术在IE中不起作用。正如in this question，Diego Mijelshon指出的IE does not allow navigation to a data URI，因此它不能用作新窗口的URL。似乎在最新版本的Chrome和Firefox中运行良好。我担心我没有可以测试的Safari副本。
如果favicon来自您自己的网站，您可以创建一个包含favicon链接（带有print.html属性）的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>");
...
}
}
});
如果您确实需要修改新窗口的favicon，可以使用与上面相同的方法，并进行以下更改：
<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>");
...
}
}
}
作为替代方案，虽然这有点沉重，但您可以通过在TheHeadHTML中注入代码来设置favicon。如果你不想打扰JS / favicon nitty-gritty，你可以使用像favico.js这样的库。
您应该使用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">';
$(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();给你的服务器window.open("/myTinyPage.html");上的一个空页面提供一个有效的URL。这样你仍然可以注入你的html悬停页面来自服务器并有一个favicon。你支付ping时间，但代码很简单。