iframeの高さがコンテンツに応じて自動調整されるようにする方法
iframeの高さをコンテンツに合わせて変更したい場合は、以下の手順を実行します。
- iframe要素のコンテンツの高さを取得する。
- iframe要素の高さを取得した値を高さ属性に代入する。
- iframe要素に、iframe要素の内容に変更があったときにトリガーされるイベントリスナーを追加します。
- イベントリスナー側で再度Contentの高さを取得し、それをiframe要素の高属性に代入する
こちらが例のコードになります。
<!DOCTYPE html>
<html>
<head>
<style>
#myIframe {
width: 100%;
border: none;
overflow: hidden;
}
</style>
</head>
<body>
<iframe id="myIframe" src="content.html"></iframe>
<script>
var iframe = document.getElementById('myIframe');
// 获取内容高度并设置初始高度
var initialHeight = iframe.contentWindow.document.body.scrollHeight;
iframe.style.height = initialHeight + 'px';
// 添加事件监听器
iframe.contentWindow.addEventListener('resize', function() {
// 获取内容高度并设置iframe高度
var newHeight = iframe.contentWindow.document.body.scrollHeight;
iframe.style.height = newHeight + 'px';
});
</script>
</body>
</html>
このサンプルコードで使用するcontent.htmlは、iframeの中身となる別のHTMLファイルであることに注意してください。あなたのコンテンツファイルと置き換える必要があります。
