iframe गतिशील ऊंचाई क्रॉस-डोमेन jquery.ba-postmessage का उपयोग कर

Question

यह एक सवाल है कि मुझे यकीन है कि भविष्य में सैकड़ों लोगों की सहायता करेगा। लेकिन लिपि मेरी jQuery क्षमता के बाहर थोड़ा सा है। मेरे पास jQuery बुनियादी कौशल हैं लेकिन यह काम नहीं कर सकता है।

मूल रूप से मैं एक iFrame (जो एक अलग डोमेन पर होस्ट की है) की जरूरत है अपने मुख्य वेबसाइट पर बैठने के लिए। मैं एक आईफ्रेम का उपयोग नहीं करना चाहता, लेकिन मेरी स्थिति में मेरे पास कोई विकल्प नहीं है! आईफ्रेम के अंदर शरीर की ऊंचाई को आकार देने के लिए मुझे आईफ्रेम की आवश्यकता है।

वर्तमान में Ben Alman jQuery postMessage plugin का उपयोग कर, यह लगता है कि यह कर सकते हैं। लेकिन वर्तमान उदाहरण वहाँ जो iFrame आकार बदलने के लिए एक टॉगल सक्षम बनाता है में अनावश्यक कोड मिला है ...

मैं इस टॉगल जरूरत नहीं है, सब मैं जरूरत iFrame सही iframe सामग्री शरीर की ऊंचाई के लिए आकार बदलने के लिए के लिए है। आईफ्रेम के अंदर शरीर की ऊंचाई में परिवर्तन के रूप में समायोजित करने के लिए मुझे iframe ऊंचाई की आवश्यकता है। http://myiframecontent.com/

<script src="js/jquery.ba-postmessage.js" type="text/javascript"></script> 
<script type="text/javascript"> 

    $(function(){ 
     // Get the parent page URL as it was passed in, for browsers that don't support 
     // window.postMessage (this URL could be hard-coded). 
     var parent_url = decodeURIComponent(document.location.hash.replace(/^#/, '')), 
     link; 

     // The first param is serialized using $.param (if not a string) and passed to the 
     // parent window. If window.postMessage exists, the param is passed using that, 
     // otherwise it is passed in the location hash (that's why parent_url is required). 
     // The second param is the targetOrigin. 
     function setHeight() { 
     $.postMessage({ if_height: $('body').outerHeight(true) }, parent_url, parent); 
     }; 

     // Now that the DOM has been set up (and the height should be set) invoke setHeight. 
     setHeight(); 

     // And for good measure, let's listen for a toggle_content message from the parent. 
     $.receiveMessage(function(e){ 
     if (e.data === 'toggle_content') { 
      link.triggerHandler('click'); 
     } 
     }, 'http://mywebsite.com'); 
    }); 

</script> 

मैं इस पर डाल दिया है:

यह मैं अब तक क्या मिला है ...

मैं iframe सामग्री फाइल पर इस डाल दिया है
इस सर्वर पर है http://mywebsite.com/

: मेरी वेबसाइट
इस सर्वर पर है 10

<script src="js/jquery.ba-postmessage.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(function(){ 

     // Keep track of the iframe height. 
     var if_height, 

     // Pass the parent page URL into the Iframe in a meaningful way (this URL could be 
     // passed via query string or hard coded into the child page, it depends on your needs). 

     src = 'http://myiframecontent.com/#' + encodeURIComponent(document.location.href), 

     // Append the Iframe into the DOM. 
     iframe = $('<iframe " src="' + src + '" width="1060" height="1000" scrolling="no" frameborder="0"><\/iframe>') 
      .appendTo('#iframe'); 

     // Setup a callback to handle the dispatched MessageEvent event. In cases where 
     // window.postMessage is supported, the passed event will have .data, .origin and 
     // .source properties. Otherwise, this will only have the .data property. 
     $.receiveMessage(function(e){ 

     // Get the height from the passsed data. 
     var h = Number(e.data.replace(/.*if_height=(\d+)(?:&|$)/, '$1')); 

     if (!isNaN(h) && h > 0 && h !== if_height) { 
     // Height has changed, update the iframe. 
      iframe.height(if_height = h); 
     } 

     // An optional origin URL (Ignored where window.postMessage is unsupported). 
     }, 'http://myiframecontent.com/'); 

     // And for good measure, let's send a toggle_content message to the child. 
     $('<a href="#">Show/hide Iframe content<\/a>') 
      .appendTo('#nav') 
      .click(function(){ 
      $.postMessage('toggle_content', src, iframe.get(0).contentWindow); 
      return false; 
     }); 

    }); 
</script> 

<div id="iframe" class="clear"></div> 

वर्तमान में ऊपर वर्तमान चौड़ाई 1060px लौटा रहा है लेकिन मेरे iframe के भीतर शरीर की ऊंचाई के लिए मेरी iframe की ऊंचाई बदल नहीं?

और यह भी टॉगल बटन मेरे नेविगेशन div # एनएवी पर मेरी साइट में जोड़ा जा रहा है। जब मुझे केवल ऊंचाई की आवश्यकता होती है।

इस पर कोई मदद के रूप में मैं, नेट पर किसी भी काम के उदाहरण नहीं मिल सकता है धन्यवाद भयानक होगा!

यह ba-postmessage.js स्क्रिप्ट है।

Answer 1

आप चाहते करने लगते हैं के रूप में लिंक से छुटकारा पाने के लिए, यहाँ आइफ्रेम सामग्री है कि एक setInterval() के माध्यम से समय-समय पर बढ़ जाती है के साथ एक काम कर उदाहरण है।

यह मुख्य वेबसाइट के पास जाना चाहिए/सर्वर एक: http://mywebsite.com/

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Container on domain A (http://mywebsite.com/)</title> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript" src="https://raw.github.com/cowboy/jquery-postmessage/master/jquery.ba-postmessage.js"></script> 
<script type="text/javascript"> 
    $(function(){ 

     // Update this constant to match your IFrame (contents) URL (no '#' here please) 
     var if_url = 'http://myiframecontent.com/'; 

     // Keep track of the iframe height. 
     var if_height; 

     // Pass the parent page URL into the Iframe in a meaningful way (this URL could be 
     // passed via query string or hard coded into the child page, it depends on your needs). 
     var src = if_url + '#' + encodeURIComponent(document.location.href); 

     // Append the Iframe into the DOM. 
     var iframe = $('<iframe " src="' + src + '" width="200" height="100" scrolling="no" frameborder="0"><\/iframe>') 
      .appendTo('#iframe'); 

     // Setup a callback to handle the dispatched MessageEvent event. In cases where 
     // window.postMessage is supported, the passed event will have .data, .origin and 
     // .source properties. Otherwise, this will only have the .data property. 
     $.receiveMessage(
      function(e){ 
       // Get the height from the passsed data. 
       var h = Number(e.data.replace(/.*if_height=(\d+)(?:&|$)/, '$1')); 

       if (!isNaN(h) && h > 0 && h !== if_height) { 
        // Height has changed, update the iframe. 
        iframe.height(if_height = h); 
        // Some user feedback if we want to... 
        $("#ticker").text("has been informed that IFrame contents height is now " + h + " and (re)acted accordingly."); 
       } 
      }, 
      // An optional origin URL (Ignored where window.postMessage is unsupported). 
      if_url 
     ); 

    }); 
</script> 
</head> 
<body> 
<p>Container <span id="ticker"></span></p> 
<div id="iframe"></div> 
<p>Container</p> 
</body> 
</html> 

और यह करने के लिए "आइफ्रेम" साइट/सर्वर बी जाना चाहिए: http://myiframecontent.com/

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Contents on domain B (http://myiframecontent.com/)</title> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript" src="https://raw.github.com/cowboy/jquery-postmessage/master/jquery.ba-postmessage.js"></script> 
<script type="text/javascript"> 
$(function(){ 
    // Get the parent page URL as it was passed in, for browsers that don't support 
    // window.postMessage (this URL could be hard-coded). 
    var parent_url = decodeURIComponent(document.location.hash.replace(/^#/, '')), 
    link; 

    // The first param is serialized using $.param (if not a string) and passed to the 
    // parent window. If window.postMessage exists, the param is passed using that, 
    // otherwise it is passed in the location hash (that's why parent_url is required). 
    // The second param is the targetOrigin. 
    function setHeight() { 
    $.postMessage({ if_height: $('body').outerHeight(true) }, parent_url, parent); 
    }; 

    // Let's increase height, and inform the parent document of new height, every 3 second 
    var i = 1; 
    function increaseHeight() { 
     $("#iframecontents").append("<p>Increase #" + i + "</p>"); 
     i = i + 1; 
     // Now that the DOM has been set up (and the height should be set) invoke setHeight. 
     setHeight(); 
    }; 
    var timer = window.setInterval(increaseHeight, 3000); 
}); 
</script> 
</head> 
<body> 
<p>iframe starts here</p> 
<div id="iframecontents"></div> 
<p>iframe ends here</p> 
</body> 
</html> 

ध्यान दें कि आपकी वास्तविक में जीवन कार्यान्वयन, आप IFrame (सामग्री) पृष्ठ में, आपको निश्चित रूप से setHeight() पर हुक करने और कॉल करने के लिए किसी प्रकार की घटना की आवश्यकता होगी।