2016-10-21 7 views
7

मैं एक नई विंडो खोल रहा हूं जिसमें मैं शरीर और सिर दोनों के लिए HTML इंजेक्शन दे रहा हूं। समस्या मुख्य खंड में है: एचटीएमएल में शीर्षक और फेविकॉन दोनों शामिल हैं लेकिन फेविकॉन नहीं दिखाता है। 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); 

तुम कैसे फ़ेविकॉन नई विंडो में प्रकट कर सकता हूँ: यह कोड और jsFiddle है?

धन्यवाद

+1

मुझे इसकी उपयोगिता के बारे में आश्चर्य है, लेकिन यह एक दिलचस्प समस्या है। –

+0

यह एक बिल प्रिंट करने के लिए है। एक नई विंडो है जो HTML प्राप्त करती है ताकि उपयोगकर्ता बिना किसी यूआई के अपने बिल का मुद्रित संस्करण प्राप्त कर सके। – frenchie

उत्तर

0

एक विकल्प के रूप में, और alhough इस थोड़ा भारी है, तो आप TheHeadHTML में कोड इंजेक्शन लगाने के द्वारा जावास्क्रिप्ट के माध्यम से फ़ेविकॉन सेट कर सकते हैं। यदि आप JS/favicon nitty-gritty से परेशान नहीं करना चाहते हैं, तो आप favico.js जैसी लाइब्रेरी का उपयोग कर सकते हैं।

+0

की कोशिश की है कि jsFiddle में, लेकिन यह काम नहीं कर रहा है और यह मेरी साइट या तो के लिए काम नहीं कर रहा: https://jsfiddle.net/ufnjspgc/2/ – frenchie

0

आपको कैश बस्टिंग विधि के रूप में URL पैरामीटर का उपयोग करके URL को गतिशील रूप से बदलना चाहिए। मैंने कैश बस्टिंग विधि के बिना आइकन को बदलने के बाद भी ब्राउज़र को लंबे समय तक फेविकॉन पर पकड़ लिया है। जब बटन है

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

:

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

कि समस्या नहीं है। इस बहुत अच्छे समाधान के लिए – frenchie

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

फ़ेविकॉन अपने स्वयं के वेब साइट से है, तो आप एक print.html टेम्पलेट पेज कि फ़ेविकॉन लिंक (एक id विशेषता के साथ) बना सकते हैं क्लिक किया गया, आप उस पृष्ठ को खोलें और सिर और बॉडी सेक्शन में अतिरिक्त सामग्री इंजेक्ट करें। मेरे परीक्षणों के अनुसार, डीओएम में फेविकॉन लिंक की उपस्थिति यह निर्धारित करने के लिए एक अच्छा संकेतक है कि पेज सामग्री को कब संशोधित किया जा सकता है। क्रोम और फ़ायरफ़ॉक्स के लिए, परिवर्तन $(wnd).load() में किए जा सकते हैं। इंटरनेट एक्सप्लोरर 11 के लिए, उन्हें $(wnd.document).ready() में बनाया जा सकता है।

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

आप:

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

तुम सच में नई विंडो के फ़ेविकॉन संशोधित करने की जरूरत है, तो आप एक ही विधि के रूप में ऊपर, निम्न परिवर्तन के साथ उपयोग कर सकते हैं 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" संसाधन ब्राउज़र (आवश्यक) के पास है। क्रॉस-उत्पत्ति और अन्य चिंताओं के कारण स्क्रिप्टिंग करते समय "रिक्त" रिक्त हो सकता है।

जैसा कि @ कॉनर्सफ़ान द्वारा नोट किया गया है, यह तकनीक आईई में काम नहीं करती है। जैसा कि in this questionDiego Mijelshon, IE does not allow navigation to a data URI द्वारा इंगित किया गया है, और इस प्रकार इसे एक नई विंडो के लिए यूआरएल के रूप में उपयोग नहीं किया जा सकता है। क्रोम और फ़ायरफ़ॉक्स के हाल के संस्करणों में ठीक काम करने लगता है। मुझे डर है कि मेरे पास सफारी की एक प्रति नहीं है जिस पर परीक्षण किया जाए।

+0

+1! हालांकि आईई 11 में बेवकूफ काम नहीं कर रहा है। यह आपके [डेटा यूआरआई संदर्भ] (https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) में उल्लिखित एमएस ब्राउज़र के लिए सीमा से संबंधित हो सकता है। – ConnorsFan

+0

अच्छी पकड़ @ कॉनर्सफ़ान, ऐसा लगता है कि आईई केवल विशिष्ट प्रकार के लिए डेटा यूआरआई को अनुमति देता है। मैं जवाब अपडेट करूंगा। –

+0

पहली नज़र में यह काम करता है लेकिन फिर ऐसा लगता है कि यदि आप इस तकनीक के साथ एक नई विंडो बनाते हैं तो आप शरीर को नहीं बदल सकते हैं, इसका संदर्भ नहीं मिल रहा है। अद्यतन पहेली: https://jsfiddle.net/ufnjspgc/6/ – frenchie

1

यहाँ एक जवाब जो मैं आपकी मदद करेगा लगता है

एचटीएमएल:

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

मैं संभव हो, अपने html आप की तरह किसी भी तरह से सम्मिलित करें, हालांकि window.open(); में आपके सर्वर window.open("/myTinyPage.html"); पर एक खाली पृष्ठ पर एक मान्य यूआरएल दें। इस तरह आप अभी भी अपने एचटीएमएल होवर इंजेक्ट कर सकते हैं पृष्ठ पृष्ठ से आता है ver और एक फेविकॉन है। आप पिंग समय का भुगतान करते हैं, हालांकि कोड सरल है।

+0

क्या यह वही समाधान नहीं है जिसे मैंने अपने उत्तर में प्रस्तावित किया था? – ConnorsFan

+0

क्षमा करें मुझे यह नहीं पता था। मुझे हटाना चाहते हैं? –

संबंधित मुद्दे