動的な iframe の高さに一定量のピクセルを追加しようとしています。iframe の高さに静的な量のピクセルを追加するにはどうすればよいですか? このJavaScriptを使用して、コンテンツに応じてiframeの高さを調整しています:
$(document).ready(function()
{
// Set specific variable to represent all iframe tags.
var iFrames = document.getElementsByTagName('iframe');
// Resize heights.
function iResize()
{
// Iterate through all iframes in the page.
for (var i = 0, j = iFrames.length; i < j; i++)
{
// Set inline style to equal the body height of the iframed content.
iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';
}
}
// Check if browser is Safari or Opera.
if ($.browser.safari || $.browser.opera)
{
// Start timer when loaded.
$('iframe').load(function()
{
setTimeout(iResize, 0);
}
);
// Safari and Opera need a kick-start.
for (var i = 0, j = iFrames.length; i < j; i++)
{
var iSource = iFrames[i].src;
iFrames[i].src = '';
iFrames[i].src = iSource;
}
}
else
{
// For other good browsers.
$('iframe').load(function()
{
// Set inline style to equal the body height of the iframed content.
this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
}
);
}
}
);
たとえば、「px」の前に「100」という数字を追加すると、現在の iframe の高さの横に 100 が追加されます。したがって、iframe の高さが 200 の場合、これを使用すると高さは 200100 になります。
iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + '100px';