2013-02-07 13 views
10

मैं इसhtml5 मैसेजिंग कई उदाहरण

function resizeCrossDomainIframe(id, other_domain) { 
    var iframe = document.getElementById(id); 
    window.addEventListener('message', function (event) { 
     if (event.origin !== other_domain) return; // only accept messages from the specified domain 
     if (event.data === "reload") top.location.reload(); // If child page sends reload request - reload it without any questions asked 
     if (isNaN(event.data)) { //If this isn't integer than it is alert 
      alert(event.data); // Show alert if not integer 
     } else { 
      var height = parseInt(event.data) + 5; // add some extra height to avoid scrollbar 
      iframe.height = height + "px"; 
      alert(event.data); 
     } 
    }, false); 
} 

यह क्या करता है की तरह एक स्क्रिप्ट गतिशील है iframe आकार बदलता है। अब पहले आईफ्रेम पेज पर मुझे सिर्फ एक चेतावनी मिलती है, लेकिन आईफ्रेम पेज के भीतर मेरे पास लिंक हैं और जब मैं दूसरे पेज पर जाता हूं तो मुझे 2 अलर्ट दिखाई देते हैं, जब मैं तीसरे पेज पर जाता हूं - मुझे 3 अलर्ट मिलते हैं, 4 वें लिंक ट्रिगर 4 अलर्ट इत्यादि होते हैं। ...

प्रत्येक IFrame की पेज मैं आकार बदलने के लिए की तरह माता-पिता बोल रहा हूँ में:

<body class="settingspage" onload="parent.postMessage(document.body.scrollHeight, '<?php echo $_SESSION['SESS_ACCESSING_FROM']; ?>');"> 

मैं "घटना" सरणी स्पष्ट करने की कोशिश की, लेकिन मैं अभी भी अलर्ट मिलता है, लेकिन इस बार वे खाली हैं, लेकिन अलर्ट की संख्या iframe के भीतर लिंक-क्लिक की संख्या के बराबर होती है?

यह क्यों है?

+0

जब/जहां कहते हैं 'resizeCrossDomainIframe()'? – FoolishSeth

+0

@FoolishSeth फ़ंक्शन स्वयं अन्य डोमेन पर स्थित है (मेरे पास दोनों डोमेन तक पहुंच है), लेकिन चूंकि यह क्रॉस-डोमेन मैसेजिंग है - मैं इसे लोड पर प्रत्येक "iframe" बॉडी पर कॉल कर रहा हूं। तो पहले "फ्रेम लोड" पर यह सब कुछ सही तरीके से प्रदर्शित करता है, लेकिन उपयोगकर्ता के रूप में iframe के भीतर लिंक पर क्लिक करके प्रगति होती है, प्रत्येक क्लिक के साथ मुझे समान मात्रा में अलर्ट मिलते हैं (1 लिंक iframe = 1 अलर्ट, 2 क्लिक = 2 ​​अलर्ट, 15 में क्लिक करें क्लिक = 15 अलर्ट आदि ..)। – Peter

उत्तर

1

समस्या यह है कि, हर बार जब आप iframe में किसी लिंक पर क्लिक करते हैं, तो लोड इवेंट निकाल दिया जाता है।

तो जब भी कोई लिंक क्लिक किया जाता है तो आप अपने संदेश ईवेंट को बाध्य करते हैं। पहली बार सब कुछ सही है, क्योंकि आप इसे एक बार बांधते हैं, दूसरी बार आपको दो अलर्ट मिलते हैं, क्योंकि आप इसे दो बार बाध्य करते हैं, और इसलिए ...

तो समाधान 'संदेश' को हटाने का है iframe के उतार पर।

इस कारण से आप अपने कोड थोड़ा साफ करने के लिए है के लिए:

var listener = function (event) { 

    if (event.data === "reload") top.location.reload(); // If child page sends reload request - reload it without any questions asked 
    if (isNaN(event.data)) { //If this isn't integer than it is alert 
     alert(event.data); // Show alert if not integer 
    } else { 
     var height = parseInt(event.data) + 5; // add some extra height to avoid scrollbar 
     iframe.height = height + "px"; 
     alert(event.data); 
    } 
}; 

तो आप अपने कार्य करता है जो आप ऑनलोड और onUnload फोन है।

function iframeOnLoad(id) { 
    var iframe = document.getElementById(id); 
    window.addEventListener('message', listener, false); 
} 

function iframeOnUnload(id) { 
    var iframe = document.getElementById(id); 
    window.removeEventListener('message', listener, false); 
} 
0

मैं समारोह को ले जाकर इस का हल करने के लिए "मुख्य पृष्ठ शरीर लोड पर" और iframe से हटाने ...

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