JQuery Postmessage عدم الاتساق

StackOverflow https://stackoverflow.com/questions/4135367

  •  30-09-2019
  •  | 
  •  

سؤال

أحاول استخدام بن الميانز jquery postmessage لتغيير حجم iframe. أنا أكثر أو أقل باستخدام مثاله مع خوادم مختلفة ومحتوى ديناميكي.

لقد نشرت سؤالًا على هذا الموقع أيضًا ، ولكن قد يكون سؤالًا مبتدئًا جدًا للإجابة عليه بالفعل.

لقد جعلتها تعمل على إرسال الرسائل كمجال متقاطع ، لكن تغيير الحجم لا يعمل. أنا فقط أعيد نشر ما نشرته كما توبي هنا:

لا يمكنني الحصول على iFrame لتغيير حجمها باستمرار عبر المتصفحات. هل هذا ما واجهته في وقت ما؟ أضفت طابعًا زمنيًا لمعرفة متى يتم استدعاء كل وظيفة ، وهي غريب جدًا ...:
- يعمل Firefox بشكل جيد - يتم تشغيل صفحة الأطفال قبل ParentPage.
- سوف يتوسع Chrome 7 ، وليس يتقلص. الطابع الزمني = الطفل قبل الوالد
- أي 8 ... يركض الوالد أمام الطفل ...! ويزداد iFrame بمقدار 30 كل نقرة على أي ارتباطات.

أي خبرة مع هذا؟

إضافة صفحتي للمرجع رمز:
الأبوين 

<html>
<head>
<script language="javascript" src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script language="javascript" src="jquery.ba-postmessage.js" type="text/javascript"></script>
<script>
    $(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://oslsrv03/cross_remote/cross_remote.htm#' + encodeURIComponent( document.location.href ),
        src = 'http://oslsrv01/crosstest/child_postmessage.html#' + encodeURIComponent( document.location.href ),

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

      //alert(src);

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

        console.log("beskjed mottat og høyden vi fikk er: " + h);
        var currentDate = new Date()
        console.log("tid parent: " + currentDate.valueOf())

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

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

    }); 
</script>
</head>

<body style="background-color:orange">
    <div id="nav"></div>

    <div  id="test">

        <div id="zshop" style="border: 3px solid red"></div>

    </div>

    dette er slutten
</body>

طفل 

<html>
<head>
<script language="javascript" src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script language="javascript" src="jquery.ba-postmessage.js" type="text/javascript"></script>
<script>
    $(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 );
        //alert("barn sender beskejd og høyden som sendes er: " + $('body').outerHeight( true ));
        console.log("barn sender beskejd og høyden som sendes er: " + $('body').outerHeight( true ));
        var currentDate = new Date()
        console.log("tid child: " + currentDate.valueOf())
      };

      // Bind all this good stuff to a link, for maximum clickage.
      link = $( '<a href="#">Show / hide content<\/a>' )
        .appendTo( '#nav' )
        .click(function(){
          $('#toggle').toggle();
          $('#stor').toggle();
          setHeight();
          return false;
        });

      // 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://oslsrv03' ); //http://127.0.0.1
    }); 
</script>
</head>

<body style="background-color:white;border: 3px solid black">
    <div id="nav"></div>

    <div  id="toggle">

        nå fra oslsvr03
        <div style="height:200px; background-color:blue;"></div>
    </div>

    <div id="stor" style="height:800px; background-color:orange; display: none">Denne skal ikke vises hele tiden!!!</div>   

</body>

هل كانت مفيدة؟

المحلول

نسيت إضافة doctype إلى المحتوى iframed. الآن يعمل مثل سحر في حالة الاختبار الخاصة بي. أقل سحرًا قليلاً في سيناريو العالم الحقيقي ، لكنني سأرى ما فعلته هناك ...

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top