Fatal编程技术网
  • jquery/
  • 使用jquery.ba-postmessage的iframe动态高度跨域

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

jquery iframe

使用jquery.ba-postmessage的iframe动态高度跨域,jquery,iframe,cross-domain,height,Jquery,Iframe,Cross Domain,Height,这是一个我相信在未来会帮助数百人的问题。但是脚本有点超出了我的jQuery能力。我有jQuery的基本技能，但不能解决这个问题 基本上，我需要一个iFrame（托管在一个单独的域中）来放置在我的主网站上。我不想使用iFrame，但在我的情况下，我别无选择！我需要将iFrame调整为iFrame内主体的高度 目前正在使用，看起来它可以做到这一点。但是当前的示例中有不必要的代码，可以通过切换来调整iFrame的大小 我不需要这个切换，我只需要将iFrame调整到正确的iFrame内容主体高度。我需要

这是一个我相信在未来会帮助数百人的问题。但是脚本有点超出了我的jQuery能力。我有jQuery的基本技能，但不能解决这个问题

基本上，我需要一个iFrame（托管在一个单独的域中）来放置在我的主网站上。我不想使用iFrame，但在我的情况下，我别无选择！我需要将iFrame调整为iFrame内主体的高度

目前正在使用，看起来它可以做到这一点。但是当前的示例中有不必要的代码，可以通过切换来调整iFrame的大小

我不需要这个切换，我只需要将iFrame调整到正确的iFrame内容主体高度。我需要调整iframe的高度，以适应iframe内身体高度的变化

这就是我目前发现的

我已将其放在iframe内容文件中
这在服务器上：


$（函数（）{
//对于不支持的浏览器，在传入时获取父页面URL
//window.postMessage（此URL可能是硬编码的）。
var parent_url=decodeURIComponent（document.location.hash.replace（/^#/，''），
链接
//第一个参数使用$.param（如果不是字符串）序列化并传递给
//父窗口。如果存在window.postMessage，则使用该，
//否则它将在位置散列中传递（这就是为什么需要父url）。
//第二个参数是targetOrigin。
函数setHeight（）{
$.postMessage（{if_height:$（'body'）.outerHeight（true）}，父url，父url）；
};
//既然已经设置了DOM（并且应该设置高度），就调用setHeight。
设置高度（）；
//为了更好地衡量，让我们听听来自家长的内容消息。
$.receiveMessage（函数（e）{
如果（例如，数据==='切换内容'）{
triggerHandler（'click'）；
}
}, 'http://mywebsite.com' );
});
我已经把这个放到我的网站上了
这在服务器上：


$（函数（）{
//跟踪iframe的高度。
var if_高度，
//以有意义的方式将父页面URL传递到Iframe中（此URL可以是
//通过查询字符串传递或硬编码到子页面，这取决于您的需要）。
src='1〕http://myiframecontent.com/#'+encodeURIComponent（document.location.href），
//将Iframe追加到DOM中。

iframe=$（'因为您似乎想摆脱链接，下面是一个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>



<!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（contents）页面中，您当然需要某种事件来挂接并调用
setHeight（）


<!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>



<!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>