28

jquery を使用して開発を行っていますが、次の問題に遭遇しました。メイン ページ内に IFrame を追加し、それらのサイズを内側から変更したいのです。私はいくつかのアイデアを試しましたが、成功しませんでした。

これが私のコードです：

index.html

<html>
    <head>
        <title>Index</title>
    </head>
    <body>
        <iframe id="myframe" src="frame.html" width="100px" height="100px"></frame>
    </body>
</html>

frame.html

<html>
    <head>
        <title>IFrame</title>
        <script>
            document.width = 500;
            document.height = 500;
        </script>
    </head>
    <body>
        <h2>My IFrame</h2>
    </body>
</html>
4

3 に答える 3

42

IFRAMEブラウザを作成すると、メイン ページ'window'のオブジェクト内に IFRAME のオブジェクトが自動的に追加されます。'window'

ドキュメントのサイズではなく、のサイズを変更する必要がありIFRAMEます。

このコードを試してください：

の場合JavaScript:

window.parent.document.getElementById('myframe').width = '500px';
window.parent.document.getElementById('myframe').height = '500px';

そしてのためにjQuery：

$('#myframe', window.parent.document).width('500px');
$('#myframe', window.parent.document).height('500px');
于 2013-08-27T04:01:42.920 に答える
16

両方のページが同じドメインにある場合 (または、document.domain を設定した場合はサブドメインであっても、テストしていない可能性があります)、javascript (または jQuery) から簡単に設定できます。

window.parent.document.getElementById('myframe').width = '500px';

ページが異なるドメインにある場合、1 つの解決策は、iFrame を呼び出しているページにイベント リスナーを追加することです (Marty Mulligan の功績):

<html>
<head>
    <title>Index</title>
	<script src="/js/jquery/js/jquery.1.10.2.min.js"></script>
	<script>
		window.addEventListener('message', function(e) {
			debugger;
		  var iframe = $("#myIframe");
		  var eventName = e.data[0];
		  var data = e.data[1];
		  switch(eventName) {
			case 'setHeight':
			  iframe.height(data);
			  break;
		  }
		}, false);
	</script>
</head>
<body>
    <iframe id="myIframe" src="http://hofvanzeeland.net/frame.html" width="100px" height="100px" border="1"></frame>
</body>
</html>

iFrame コンテンツ (frame.html) からトリガーします。

<html>
    <head>
        <title>IFrame</title>		
        <script>            
			function resize() {
			  var height = document.getElementsByTagName("html")[0].scrollHeight;
			  window.parent.postMessage(["setHeight", height], "*"); 
			}
        </script>
    </head>
    <body>
        <h2>My IFrame</h2>
		<a href="#" onclick="resize()">Click me</a>
    </body>
</html>

于 2014-12-11T14:12:19.400 に答える
-1 
function setHeight() {
    parent.document.getElementById('the-iframe-id').style.height = document['body'].offsetHeight + 'px';
}

使用する別の方法Javascript

document.getElementById("ifr").height= "500px";
document.getElementById("ifr").width= "500px";

デモ JSFIDDLE

于 2013-08-27T03:41:39.443 に答える