即使使用jQuery腳本，iFrame也不會擴展到全部內容高度

以下是iFrame in question。即使使用jQuery腳本，iFrame也不會擴展到全部內容高度

在標題中，我有以下的jQuery代碼：

<script> 

    $(function(){ 

     var iFrames = $('iframe'); 

     function iResize() { 

      for (var i = 0, j = iFrames.length; i < j; i++) { 
       iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';} 
      } 

      if ($.browser.safari || $.browser.opera) { 

       iFrames.load(function(){ 
        setTimeout(iResize, 0); 
       }); 

       for (var i = 0, j = iFrames.length; i < j; i++) { 
        var iSource = iFrames[i].src; 
        iFrames[i].src = ''; 
        iFrames[i].src = iSource; 
       } 

      } else { 
       iFrames.load(function() { 
        this.style.height = this.contentWindow.document.body.offsetHeight + 'px'; 
       }); 
      } 

     }); 

</script>

嵌入式看起來像這樣：

<div id="appointy"> 

<iframe src="//hfxtutoring.appointy.com/?isGadget=1" class="iframe" scrolling="no" frameborder="0" allowtransparency="true" style="text-align: center; -webkit-overflow-scrolling: touch; overflow: auto;"> 
</iframe> 

</div>

而CSS是這樣的：

/* to ensure proper scrolling and overflow handling on mobile devices, put this styling in a div wrapper around the iframe because it's unreliable in css: -webkit-overflow-scrolling: touch; overflow: auto; */ 

.iframe 
{ 
    border: none; 
    width: 100%; 
    margin-right: 10px; 
    padding: 0; 
    border: 1px 
}

我想要什麼是爲iFrame調整內容高度，而不是設置高度。我不完全瞭解如何使它像this example一樣工作。

來源

2016-03-06 NictraSavios

無法訪問交叉域內iframe – charlietfl

哦。無論如何做這項工作？ – NictraSavios

您可以嘗試[iframe resizer]（https://github.com/davidjbradshaw/iframe-resizer） –

你可以試試CSS。 Here is my codepen。

iframe { 
    height: calc(100vh - 20px); 
    width: calc(100vw - 40px); 
}

我已經添加了calc函數，以便讓您瞭解如何進一步動態控制高度/寬度的大小。

來源

2016-03-14 23:44:22

謝謝你唯一的答案，而不是告訴我爲什麼不起作用，給了我一些可以工作的東西，並且可以通過我實際需要的解決方案。 – NictraSavios

我的榮幸，愉快的建議是有幫助的。 –

該解決方案並不完美，CSS中的calc（）並未得到廣泛支持。如果OP已經指定了特定的瀏覽器，那麼肯定是要走的路，否則會有一些誤導性的答案。請注意，您的最新瀏覽器可能看起來不錯，但其他人查看該頁面可能會看到奇怪的現象。 http://www.w3schools.com/cssref/func_calc.asp – Erik

您是否嘗試過向iframe添加allowfullscreen？

<iframe src="{URL}" {other params} allowfullscreen></iframe>

您可能還需要調整包裝div的CSS。

來源

2016-03-09 19:30:08

它現在擴展到適當的寬度....但它保持相同的高度。 – NictraSavios

將高度設置爲100％包裝div –

@NictraSavios您不應該需要jQuery才能達到此效果。讓我知道如果這仍然不適合你，我會舉一個工作的例子。 –

你不能這樣做，它打破了互聯網。如果您可以更改或編輯iframe的內容，您可能會在指定網站上造成大規模混亂。這種東西是有原因阻止的。可悲的是，「改變或編輯」也意味着對iframe的內容做任何事情，包括僅僅對其進行查詢。

這將是蛋糕，如果你可以在任命的網站和你的服務器上啓用CORS。這會讓你運行一個腳本來獲得可滾動div的高度，然後你可以簡單地從那裏設置你的iframe的高度。

否則你不能這樣做。由於針對跨站點/跨源腳本實施的規則，您無法獲得iframe中內容的高度。

var y = $("iframe") 
y.contents()

任何操作試圖在的IFRAME（以鉻）將導致： jquery.min.js：2未捕獲的拋出：DOMException：未能讀取從「HTMLIFrameElement」的「contentDocument」屬性：被阻止與原點的幀（...）

如果你的應用程序是任命的子域名，那麼你也可以這樣做，但有一些規則可以防止你欺騙不同的域名。：/

還使用Chrome的開發控制檯手動調整CSS在約會網址顯示該滾動條是一個JS滾動條，所以有一個負責處理的其他負載。

來源

2016-03-14 20:11:20 Erik

反對的任何理由？瞭解我的一些知識，plz ... – Erik

我不知道爲什麼這是downvoted，或爲什麼人們downvote沒有尊嚴的事情告訴人們爲什麼。這確實是避免js在合法網站注入/欺騙的一項安全措施。 – Iacchus

處理iFrames是一個20歲的問題，仍然沒有一個簡單的本地選項。

看着你的代碼不調用iResize（）函數。它也只會在頁面加載時調整iFrame的大小，您還需要檢測內容是否更改，或者窗口大小等等，它們大約有20種不同的事件可能導致內容更改大小。

我還會指出，使用offsetHeight將不包括body標籤的高度和邊距。

我寫了一個lib，它處理大多數iFrames存在的問題，它在保持iFrame大小適合您的內容方面做了不錯的工作。如果您有能力將JS添加到您的iFrame，它甚至可以與第三方網站跨域進行工作。

您可能會發現它有助於解決此問題以及iFrames會導致您的其他問題。

https://github.com/davidjbradshaw/iframe-resizer

如果您沒有訪問JS添加到的iFrame那麼它是不可能在瀏覽器中做到這一點，由於安全保護功能，能夠阻止你與遠程站點的干擾。如果你想了解我的項目如何解決這個看看postMessage API。

來源

2016-03-15 22:15:00

我沒有能力將JS添加到框架，因此您的解決方案是不可能的。反正謝謝你。 – NictraSavios

即使使用jQuery腳本，iFrame也不會擴展到全部內容高度

回答

相關問題