無法調整iframe內容的fancybox

我想重複使用多個fancybox iframe的相同選擇器類。我已經看過關於將iframe內容放入fancybox的不同帖子。儘管我看過的所有內容似乎都可以工作（我目前使用的是JFK's solution here），但我無法獲取它，或者其他人在我的頁面上工作。我在firebug中查找「fancybox-iframe」類，它讀作「fancybox-type-iframe」類。有人能讓我知道我在下面使用的代碼有什麼問題，爲什麼它是錯誤的以及如何解決它。鏈接的答案，jsfiddles等也很好。用於包含少量內容的fancybox內聯，但我想爲頁面使用iframe。謝謝！無法調整iframe內容的fancybox

這裏是完整的代碼。

此鏈接打開的fancybox是在不同的頁面域內

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

HTML頁面中的fancybox顯示

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

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

火狐警報導致

enter image description here

IE 9警報結果：

enter image description here

來源

2012-12-17 Chris22

可能是一個錯字在你的頁面中的fancybox展示......這條線：

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

...缺少style="..."中的結束報價，因此無法從該標籤獲取維度。

我的DEMO進一步的代碼分析。

來源

2012-12-17 20:34:11 JFK

謝謝JFK。我修改了我的代碼（添加了結束報價），但這不是問題，因爲我在我的html中有結束報價。我試圖使用警報調試div的值。我發佈了返回警報的圖像。我在這裏錯過了什麼？謝謝。 – Chris22

@ Chris22：代碼有效，但是你的代碼似乎是特定情況。你能分享一個鏈接嗎？否則我們可以繼續猜測一個月。順便說一句，'hideOnContentClick'不是v2.x的有效選項，請檢查此選項是否正確http://stackoverflow.com/a/8404587/1055987 – JFK

謝謝JFK。我目前沒有公開的網址。我無法理解爲什麼只有Firefox能夠正確使用，但Chrome似乎沒有。 IE瀏覽器返回fancybox瓦特/內容，只是在錯誤的大小。我可以發佈更多的屏幕截圖，但我想它不會幫助重現我所看到的 - 即使警報確認。感謝你的寶貴時間。 – Chris22

無法調整iframe內容的fancybox

回答

相關問題