iframe动态高度跨域使用jquery.ba-postmessage-Java 学习之路

这个问题我相信将来会帮助数百人 . 但是脚本有点超出我的jQuery能力 . 我有jQuery基本技能，但无法解决这个问题 .

基本上我需要一个iFrame（托管在一个单独的域上）来坐在我的主网站上 . 我不想使用iFrame，但在我的情况下我别无选择！我需要iFrame调整到iframe内部主体的高度 .

目前使用Ben Alman jQuery postMessage plugin，看起来它可以做到这一点 . 但是当前的例子里面有不必要的代码，它允许切换调整iFrame的大小......

我不需要这个切换，我需要的是让iFrame调整到正确的iframe内容体高度 . 我需要iframe高度来调整iframe内的身高变化 .

这是我到目前为止发现的......

I have put this on the iframe content file
这是在服务器上：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>

I have put this on my website
这是在服务器上：http://mywebsite.com/

<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＃nav中的切换按钮也被添加到我的网站中 . 当我需要的只是高度 .

任何有关这方面的帮助都会很棒，因为我在网上找不到任何有用的例子，谢谢！

这是ba-postmessage.js脚本 .

1 回答

由于您似乎想要摆脱链接，这里有一个工作示例，iframe内容通过 setInterval() 定期增加 .

这应该去主网站/服务器A： 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>

这应该去"iframe" site / server B： 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() .

回复于 2024-04-29T21:21:22+08:00

iframe动态高度跨域使用jquery.ba-postmessage

1 回答

相关问题