将fancybox高度设置为Iframe体高

时间:2015-05-18 13:59:09

标签: javascript html iframe

还有许多其他类似标题的流程。我已经尝试了所有流程,但没有一个工作。!

Register.php有表格&相关的js文件。一旦我注册,thankyou页面也会出现相同的高度。

3d block is what i wanted.

HTML

 <a class="reg-popup fancybox.iframe" data-fancybox-type="iframe"  href="register.php"> Register </a>

Jquery的

jQuery(document).ready(function() {  
     jQuery(".reg-popup").fancybox({                 
            fitToView        : true,
            type             : 'iframe',
            autoSize         : false,
            minWidth         : '43%',
            maxWidth         : '50%',
            maxHeight       : '90% ',           
            width            : 'auto',
            height           : 'auto',
            autoDimensions   : true, 
            html        : true,

            beforeShow: function(){
                this.width = (jQuery('.fancybox-iframe').contents().find('body').width());
                this.height = (jQuery('.fancybox-iframe').contents().find('body').height());                
            },                      
            'afterClose':function () {
                      window.location.reload();                   
              },
              onUpdate : { autoHeight: true},
            helpers : {
                  overlay : {closeClick: false}
            }        
         });
    });

2 个答案:

答案 0 :(得分:0)

如果iframe内容位于不同的子域/域上,则需要使用postMessage以便两者可以进行通信。您需要访问iframe中的内容,以便传达文档高度。

答案 1 :(得分:0)

尝试将nextSpeed和prevSpeed设置为0.我不确定你需要这里的括号(jQuery('。fancybox-iframe')。contents()。find('body')。width())但是他们不会有任何伤害。

jQuery(document).ready(function() {  
     jQuery(".reg-popup").fancybox({                 
        fitToView        : true,
        type             : 'iframe',
        autoSize         : false,
        minWidth         : '43%',
        maxWidth         : '50%',
        maxHeight       : '90% ',           
        width            : 'auto',
        nextSpeed: 0,                  //add this line
        prevSpeed: 0,                  //and this line
        height           : 'auto',
        autoDimensions   : true, 
        html        : true,

        beforeShow: function(){
            this.width = (jQuery('.fancybox-iframe').contents().find('body').width());
            this.height = (jQuery('.fancybox-iframe').contents().find('body').height());                
        },                      
        'afterClose':function () {
                  window.location.reload();                   
          },
          onUpdate : { autoHeight: true},
        helpers : {
              overlay : {closeClick: false}
        }        
     });
});