0

我想为多个fancybox iframe 重用相同的选择器类。我在这里查看了关于将 iframe 内容调整为fancybox 的不同帖子。虽然我看到的所有这些似乎都可以工作（我目前在这里使用 JFK 的解决方案），但我无法获得它，或者其他一些人无法在我的页面上工作。我在萤火虫中查找了“fancybox-iframe”类，它读作“fancybox-type-iframe”类。有人可以让我知道我在下面使用的代码有什么问题，为什么它是错误的以及如何修复它。链接的答案、jsfiddles 等也很好。内联用于包含少量内容的花式框，但我想将 iframe 用于页面。谢谢！

这是完整的代码。

这个打开fancybox的链接在域内的不同页面上

 <a href="thm12.html" class="openfb"></a>

在fancybox中显示的HTML页面

    <!DOCTYPE html >
    <html style="width:550px;height:350px;" >
    <head>
    <title>THM - Twelve</title>
    <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
    <script src="../js/ui/jquery.ui.core.js"></script>
    <script src="../js/ui/jquery.ui.widget.js"></script>
    <script src="../js/ui/jquery.ui.mouse.js"></script>
    </script>    
    </head>    
    <body>

    <div class="thm-set">
       <p class="thm-set-title" >Start Settings</p>
  <form id="" class="default-set-thm" >


    <div class="thm-content" ><p>Lorem ipsum aenean tempus lacus vitae orci 
                        posuere porttitor eget non felis. Donec lectus elit, aliquam nec eleifend sit amet.</p><input type="text" value="" placeholder="" /></div>


           <span class="buttons">
                <input type="submit" class="close-fancybox"  value=""/>
                    <input type="submit" class="save-fancybox" value=""  />           
                </span> 
           </form>   
       </div>
    </body>
    </html>

花式盒子 js 脚本

$(".openfb").fancybox({
    hideOnContentClick: false,
    type:'iframe',
    scrolling: 'no', 
    beforeShow: function(){
        this.width = ($('.fancybox-iframe').contents().find('html').width());
             alert("the width of this div is " + this.width);
        this.height = ($('.fancybox-iframe').contents().find('html').height());
    }
});

Chrome 提醒结果

javascript 警报

火狐警报结果

在此处输入图像描述

IE 9 警报结果：

在此处输入图像描述

4

1 回答 1

0

可能是您页面中的拼写错误，显示在 fancybox ... 这一行：

<html style="width:550px;height:350px; >

... 缺少结束引号，style="..."因此无法从该标签中获取尺寸。

我的DEMO用于进一步的代码分析。

于 2012-12-17T20:34:11.890 回答