Question

我想为多个fancybox iframe重用相同的选择器类。关于将iframe内容调整为fancybox，我在这里查看了不同的帖子。虽然我看到的所有内容似乎都可以使用（我现在正在使用JFK's solution here），但是我无法得到它，或者其他一些人在我的页面上工作。我在firebug中查找了“fancybox-iframe”类，它读作“fancybox-type-iframe”类。有人能让我知道我在下面使用的代码有什么问题，为什么它是错的以及如何解决它。链接的答案，jsfiddles等也很好。内联使用包含少量内容的fancybox，但我想将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>

fancybox js script

$(".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 alert

Firefox警报结果

enter image description here

IE 9警告结果：

enter image description here

Answer 1

您网页中的拼写错误可能会显示在fancybox中......此行：

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

...缺少style="..."中的结束语，因此无法从该标记中获取维度。

我的 DEMO 进行进一步的代码分析。

无法为iframe内容调整fancybox的大小

1 个答案: