faviconを新しいウィンドウで表示するには

私は身体と頭の両方にHTMLを挿入している新しいウィンドウを開きます。問題は頭の部分です：HTMLにはタイトルとファビコンの両方が含まれていますが、ファビコンは表示されません。 https://jsfiddle.net/ufnjspgc/faviconを新しいウィンドウで表示するには

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

ファビコンが新しいウィンドウに表示されます作るにはどうすればよい：これは、コードとjsFiddleのですか？

おかげ代替として

出典

2016-10-21 frenchie

私はこれの有用性について不思議ですが、それは興味深い問題です。 –

これは請求書を印刷するためのものです。ユーザーがすべてのUIなしで彼の請求書の印刷版を入手できるように、HTMLを受け取る新しいウィンドウがあります。 – frenchie

、これは少し重いですalhough、あなたはTheHeadHTMLにコードを注入することにより、JavaScriptでファビコンを設定することができます。あなたはJS/faviconのぎこちなさを気にしたくなければ、favico.jsのようなライブラリを使うことができます。

出典

2016-10-22 11:50:02

jsFiddleで試してみましたが、うまくいかず、自分のサイトでもうまくいきません：https://jsfiddle.net/ufnjspgc/2/ – frenchie

キャッシュの破棄方法としてURLパラメータを使用してURLを動的に変更する必要があります。私はブラウザが、キャッシュ無効化メソッドなしでアイコンが変更された後でも、長い間、ファビコンを保持しているのを見ました。

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

出典

2016-10-27 22:13:09 JLeider

これは問題ではありません。 – frenchie

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

出典

2016-10-28 19:19:58

ファビコンが独自のWebサイトからのものである場合、あなたは（id属性を持つ）ファビコンのリンクが含まれているprint.htmlテンプレートページ作成できます。ボタンがある場合は

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

をクリックすると、そのページが開き、追加のコンテンツがheadセクションとbodyセクションに挿入されます。私のテストによると、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>"); 
      ... 
     } 
    } 
}

出典

2016-10-28 20:56:50 ConnorsFan

あなたは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"リソースブラウザにコンテンツを指定することができます。 "about：blank"は、クロスオリジンやその他の問題のためにスクリプティングの際に多くの問題を引き起こす可能性があります。

@ConnorsFanで述べたように、この手法はIEでは動作しません。示されているようにin this questionはDiego Mijelshon,IE does not allow navigation to a data URIとなり、新しいウィンドウのURLとして使用することはできません。 ChromeとFirefoxの最近のバージョンで正常に動作するようです。私はテストするSafariのコピーを持っていないことは怖いです。

出典

2016-10-28 21:23:42

+1この非常に良い解決策！しかし、IE11ではこのフィドルはうまくいかないようです。これは、[データURIリファレンス]（https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs）に記載されているMSブラウザの制限に関連している可能性があります。 – ConnorsFan

いいえcatch @ConnorsFan、IEのように見えるのは、特定のタイプのデータURIだけです。私は答えを更新します。 –

一見それは動作しますが、このテクニックで新しいウィンドウを作成してもボディを変更できない場合、そのウィンドウへの参照が見つからないようです。更新されたフィドル：https://jsfiddle.net/ufnjspgc/6/ – frenchie

は、ここで私はあなたに役立つだろうと思うの答えだ

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

出典

2016-10-31 12:13:01 breakpoint

I可能、あなたのhtmlあなたが好きなように注入し、しかし、window.open();あなたのサーバー上の空のページに有効なURLを与えるwindow.open("/myTinyPage.html");。この方法では、あなたはまだあなたのHTMLホバーを挿入することができますページは、 verとfaviconを持っています。 ping時間を費やしますが、コードは単純です。

出典

2016-10-31 12:38:16

それは私の答えで提案した解決策ではありませんか？ – ConnorsFan

申し訳ありませんが、私はそれに気付かなかった。私は削除したいですか？ –

faviconを新しいウィンドウで表示するには

答えて

関連する問題