如何實現頭部預覽的iFrame？

我知道這是一個普遍的問題，但我無法在Stackoverflow或搜索谷歌上得到真正的答案。如何製作帶固定標題和頁面鏈接的頁面以及給定URL的iFrame。我遇到的最接近的是iFrame with Fixed Header。我真正想要達到的是this example on CodeCanyon。第一個鏈接給出了一個體面的答案，但該頁面有兩個滾動條。提前致謝！如何實現頭部預覽的iFrame？

編輯：我想拍的iFrame伸展到頁面:)

來源

2013-05-21 Efrain Anthony Negron

你鏈接的例子是使用jquery動態調整高度。

//function to adjust height of iframe 
var calcHeight = function() { 
    var headerDimensions = $('#header-bar').outerHeight(true); 
    $('#preview-frame').height($(window).height() - headerDimensions); 
} 

$(document).ready(function() { 
    calcHeight(); 
}); 

$(window).resize(function() { 
    calcHeight(); 
}).load(function() { 
    calcHeight(); 
});

這是我用來動態調整高度的代碼。

，你可以在這裏看到它的jsfiddle http://jsfiddle.net/QQKc4/11/

來源

2013-05-21 13:36:40

令人驚歎，謝謝！ –

您將有你的HTML這樣的事情...

<html> 
<head> 
</head> 
<body> 
<div style="height:[[some value you want in px]]"; width:100%;> 
The logo and links come here 
</div> 
<iframe src="[[the url to load]]" style="width:100%;"></iframe> 
</body> 
</html>

注意的高度 - 內聯樣式可以移動到樣式表，併爲iframe，你需要用javascript/jQuery來計算窗口高度減去頭部div高度並將高度應用於iframe

來源

2013-05-21 13:22:21

我使用的是這樣的： http://jsfiddle.net/ebv8j/ 我想要的iframe以適應頁面的高度。 –

@EfrainAnthonyNegron我將jquery片段添加到了jsfiddle http://jsfiddle.net/ebv8j/3/ –

@PedroEstrada - 非常感謝！ –

你可以做

<html> 
    <head> 
    </head> 
    <body> 
     <div style="height:(x)px; width:100%; position:absolute; top:0; bottom:0; z-index:2;"> 
      The logo and links come here 
     </div> 
     <div style="width:100%; height:100%; position:absolute; top:0; bottom:0; z-index:1"> 
      <iframe src="xx.html" style="margin-top:(x)px; width:inherit; height:inherit"></iframe> 
     </div> 
    </body> 
</html>

來源

2013-05-21 13:41:16

如何實現頭部預覽的iFrame？

回答

相關問題