iframe

2008-12-17 28 views
50

की सामग्री लोड करने में विफलता का पता लगाएं, जब मैं लोड ईवेंट का उपयोग करके किसी आईफ्रेम की सामग्री लोड कर लेता हूं तो पता लगा सकता है। दुर्भाग्यवश, मेरे उद्देश्यों के लिए, इसमें दो समस्याएं हैं:iframe

  • यदि पृष्ठ (404/500, आदि) लोड करने में कोई त्रुटि है, तो लोड ईवेंट कभी नहीं निकाल दिया जाता है।
  • यदि कुछ छवियां या अन्य निर्भरता लोड होने में विफल रही हैं, तो लोड ईवेंट सामान्य रूप से निकाल दिया जाता है।

क्या कोई तरीका है कि मैं विश्वसनीय तरीके से निर्धारित कर सकता हूं कि उपर्युक्त त्रुटियों में से कोई भी हुआ है या नहीं?

मैं मोज़िला/एक्सयूएलआरनर पर आधारित अर्ध-वेब अर्ध-डेस्कटॉप एप्लिकेशन लिख रहा हूं, इसलिए मोज़िला में केवल समाधान ही स्वागत है।

उत्तर

14

आप iframe पेज पर नियंत्रण है (और पेज एक ही डोमेन नाम पर कर रहे हैं), तो एक रणनीति के रूप हो सकता है इस प्रकार है:

  • मूल दस्तावेज़ में, प्रारंभ एक चर var iFrameLoaded = false;
  • जब iframe दस्तावेज़ लोड किया गया है, इस वैरिएबल को पैरेंट में true को iframe दस्तावेज़ से कॉल करने के लिए एक पैरेंट का फ़ंक्शन (setIFrameLoaded(); उदाहरण के लिए सेट करें)।
  • iFrameLoadedtimer ऑब्जेक्ट का उपयोग करके ध्वज चिह्नित करें (टाइमर को अपनी पसंदीदा टाइमआउट सीमा पर सेट करें) - अगर ध्वज अभी भी गलत है तो आप बता सकते हैं कि आईफ़्रेम नियमित रूप से लोड नहीं किया गया था।

मुझे आशा है कि इससे मदद मिलती है।

+5

1) iframe पृष्ठ पर क्यों जोड़ने की परेशानी जावास्क्रिप्ट? मैं बस लोड घटना के साथ सेटटाइमआउट का उपयोग आसानी से कर सकता था। 2) यह विश्वसनीय रूप से पता नहीं लगाता है कि लोड विफल रहता है या क्यों, यह एक समय सीमा के भीतर सफल होता है या नहीं। 3) उस मामले का पता नहीं लगाता है जहां पृष्ठ निर्भरता लोड होने में असफल हो जाती है। –

+0

विभिन्न संसाधन अलग-अलग समय फ्रेम में लोड होंगे। यह अप्रत्याशितता आपके दृष्टिकोण डैनियल कैसिडी को मार डालेगी, क्योंकि आपको एक उचित लंबे समय के लिए अनुमति देना होगा। इस बीच, अल्पकालिक लोड त्रुटियां तब तक स्क्रीन पर लटका दी जाएंगी जब तक कि टाइमर मानता है कि संसाधन लोड करने में विफल रहा है और त्रुटि को संभालता है। – seebiscuit

8

मुझे हाल ही में यह समस्या थी और माता-पिता पृष्ठ पर एक जावास्क्रिप्ट मतदान कार्रवाई स्थापित करने का सहारा लेना पड़ा (जिसमें आईएफआरएएम टैग शामिल है)। यह जावास्क्रिप्ट फ़ंक्शन स्पष्ट तत्वों के लिए IFRAME की सामग्री की जांच करता है जो केवल एक अच्छी प्रतिक्रिया में मौजूद होना चाहिए। यह निश्चित रूप से मानता है कि आपको "एक ही मूल नीति" का उल्लंघन करने का सामना नहीं करना पड़ेगा।

कई अलग-अलग नेटवर्क संसाधनों से उत्पन्न होने वाली सभी संभावित त्रुटियों की जांच करने के बजाय .. मैंने बस एक निरंतर सकारात्मक तत्व (ओं) की जांच की जो मुझे पता है कि एक अच्छी प्रतिक्रिया में होना चाहिए।

अपेक्षित तत्वों का पता लगाने के लिए पूर्व निर्धारित समय और/या # विफल प्रयासों के बाद, जावास्क्रिप्ट IFRAME की एसआरसी विशेषता (मेरे सर्वलेट से अनुरोध करने के लिए) को उपयोगकर्ता मित्रतापूर्ण त्रुटि पृष्ठ को प्रदर्शित करने के विरोध में संशोधित करता है सामान्य HTTP त्रुटि संदेश। जावास्क्रिप्ट पूरी तरह से अलग अनुरोध करने के लिए एसआरसी विशेषता को आसानी से संशोधित कर सकता है।

function checkForContents(){ 
var contents=document.getElementById('myiframe').contentWindow.document 
if(contents){ 
    alert('found contents of myiframe:' + contents); 
    if(contents.documentElement){ 
     if(contents.documentElement.innerHTML){ 
      alert("Found contents: " +contents.documentElement.innerHTML); 
      if(contents.documentElement.innerHTML.indexOf("FIND_ME") > -1){ 
       openMediumWindow("woot.html", "mypopup"); 
      } 
     } 
    } 
} 

}

1

मुझे लगता है कि pageshow घटना त्रुटि पृष्ठों के लिए निकाल दिया गया है। या यदि आप क्रोम से ऐसा कर रहे हैं, तो आप अपने प्रगति श्रोता के अनुरोध को जांचने के लिए जांचें कि यह एक HTTP चैनल है या नहीं, इस स्थिति में आप स्थिति कोड पुनर्प्राप्त कर सकते हैं।

पृष्ठ निर्भरताओं के लिए, मुझे लगता है कि आप केवल कैरोचर ईवेंट श्रोता को कैप्चर करके क्रोम से ही ऐसा कर सकते हैं, और फिर भी इसे केवल तत्वों में त्रुटियां मिलेंगी, सीएसएस पृष्ठभूमि या अन्य छवियों में नहीं।

0

अपने आईफ्रेम में लोड होने वाले पृष्ठ में शीर्ष (शरीर) तत्व के लिए एक आईडी है।

अपने आईफ्रेम के लोड हैंडलर पर, यह देखने के लिए जांचें कि क्या GetElementById() एक गैर शून्य मान देता है। यदि यह है, तो iframe सफलतापूर्वक लोड हो गया है। अन्यथा यह असफल रहा है।

उस मामले में, frame.src = "about: blank" डालें। ऐसा करने से पहले लोडहैंडर को हटाना सुनिश्चित करें।

+0

क्या होगा यदि हमारे पास उस पृष्ठ पर नियंत्रण नहीं है जिसे हम लोड कर रहे हैं। तो इस स्थिति को कैसे संभालें ?? –

0

आपके प्रश्न का बिल्कुल जवाब नहीं देता है, लेकिन एक उत्तर के लिए मेरी खोज ने मुझे यहां लाया, इसलिए मैं किसी और के साथ एक समान प्रश्न पूछने पर बस पोस्ट कर रहा हूं।

यह लोड लोड का उपयोग नहीं करता है, लेकिन यह पता लगा सकता है कि कोई वेबसाइट सुलभ और कॉल करने योग्य है (यदि यह है, तो iFrame, सिद्धांत रूप में, लोड होना चाहिए)।

सबसे पहले, मैंने एजेक्स कॉल को हर किसी की तरह करने का विचार किया, सिवाय इसके कि यह मेरे लिए शुरू में काम नहीं करता था, क्योंकि मैंने jQuery का उपयोग किया था। यह पूरी तरह से काम करता है अगर आप एक XMLHttpRequest कार्य करें:

var url = http://url_to_test.com/ 
var xhttp = new XMLHttpRequest(); 
xhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status != 200) { 
     console.log("iframe failed to load"); 
    } 
}; 
xhttp.open("GET", url, true); 
xhttp.send(); 

संपादित करें:
तो इस विधि ठीक काम करता है, को छोड़कर यह मिथ्या नकारात्मक का एक बहुत है कि (जो एक iframe में प्रदर्शित कर सामान का एक बहुत ऊपर उठाता) क्रॉस-उत्पत्ति मलेकी के कारण। जिस तरह से मैं इसे प्राप्त करता था वह सर्वर पर एक कर्ल/वेब अनुरोध करना था, और फिर वेबसाइट के मौजूद होने पर प्रतिक्रिया शीर्षलेखों की जांच करें) और बी) यदि शीर्षलेख x-frame-options सेट करते हैं।

यदि आप अपना स्वयं का वेबसर्वर चलाते हैं तो यह कोई समस्या नहीं है, क्योंकि आप इसके लिए अपना एपीआई कॉल कर सकते हैं।

Node.js में मेरे कार्यान्वयन:

app.get('/iframetest',function(req,res){ //Call using /iframetest?url=url - needs to be stripped of http:// or https:// 
    var url = req.query.url; 
    var request = require('https').request({host: url}, function(response){ //This does an https request - require('http') if you want to do a http request 
     var headers = response.headers; 
     if (typeof headers["x-frame-options"] != 'undefined') { 
      res.send(false); //Headers don't allow iframe 
     } else { 
      res.send(true); //Headers don't disallow iframe 
     } 
    }); 
    request.on('error',function(e){ 
     res.send(false); //website unavailable 
    }); 
    request.end(); 
});