設置自動高度IFRAME

我已經得到了處理PDF文件的iframe：設置自動高度IFRAME

<iframe src="pdf/sample.pdf"></iframe>

如何設置的iframe是相同的高度，PDF文件，沒有滾動條？

來源

2012-11-04 Daniel Koczuła

http://stackoverflow.com/questions/247128/how-to-auto-size-an-iframe，http：// stackoverflow。 com/questions/153152/resizing-an-iframe-based-on-content – Reflective

如果要顯示不帶滾動條的PDF，可以通過在URL中傳遞參數來完成此操作。 Adobe已經證明這個位置： http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf

試試這個：

<iframe src="pdf/sample.pdf#view=fit"></iframe>

你是不完全設置iframe的高度，以適應PDF，但它可能是最強大的解決方案，因爲它是瀏覽器的獨立，不需要JavaScript。

以下是丹尼爾評論後的更新。

我創建了一個測試HTML如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Untitled Page</title> 
</head> 
<body> 
    <iframe src="http://partners.adobe.com/public/developer/en/pdf/PDFReference.pdf#view=fit&toolbar=0&navpanes=0" 
     width="300px" height="400px"></iframe> 
</body> 
</html>

這是它的外觀在Chrome：

enter image description here

這是符合市場預期。

請注意，我也關閉了工具欄和navpane，所以有空間放置頁面。

來源

2012-11-05 07:58:45

我試過這個，但它不工作。 –

@Daniel查看更新。 –

是的，但您已將高度設置爲400，並且希望pdf不顯示滾動條而顯示在iframe中。所以當我要查看pdf時，我必須使用瀏覽器滾動條向下滾動。現在你明白我的意思了嗎？ –

你可以簡單地使用我已經在我的Facebook發佈說明的方法https://www.facebook.com/antimatterstudios/posts/10151007211674364

你有一個IFrame，要自動設置，因爲你是從其他網站託管頁面的高度做在你的。

不幸的是，IFrame無法取得您正在加載的內容的高度，除非您放置高度，否則它將顯示默認高度或根本沒有高度。這很煩人。

我爲您提供瞭解決方案，它只適用於最新的標準支持瀏覽器，但也適用於IE8，因此對於99％的用戶來說，它是完美的。

唯一的問題是你需要在iframe中插入一個javascript，如果你正在加載的內容屬於你，這很容易，你可以打開你正在加載的內容並將javascript放入內容中。

在你的網站，你需要一段JavaScript可以「從IFrame中收到一條消息」，像這樣

jQuery(document).ready(function(){ 
    jQuery(window).bind("message",function(e){ 
     data = e.data || e.originalEvent.data; 
     jQuery("iframe.newsletter_view").height(data.height); 
    }); 
});

在iframe中的內容

，在最底層添加此，可能它的確定只是做類似「$模板$的javascript」使用PHP或東西，即使JavaScript是不是我使用jQuery的標籤

<script type="text/javascript" src="jquery-1.7.1-min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    parent.postMessage({ 
     height:$(document.body).height()+50+"px" 
    },"*"); 
}); 
</script>

顯然裏面，你沒有，它只是更容易，也許你是使用它，所以省去了麻煩。

如果你這樣做，當的iframe加載時，它會發出一個信號回父窗口，這將基於內容:)

的長度調整的iframe我相信你可以弄清楚如何改變小事情，但多數民衆贊成我使用的方法

來源

2012-12-30 19:46:27

或者，你可以打開內容，只是通過javascript到你想要顯示在iframe中的底部，我應該明確表達出來，但是在回讀我的回答後，我意識到我沒有完全說出。 –

設置自動高度IFRAME

回答

相關問題