Soru Bir iframe'nin boyutunu içinden nasıl değiştirebilirim?


JQuery ile geliştiriyorum ve bir sonraki problemle karşılaştım: Ana sayfada bir IFrame ekledim ve onları içeriden yeniden boyutlandırmak istiyorum. Bazı fikirler denedim ama başarılı olamadım.

İşte kodum:

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>

19
2017-08-27 03:37


Menşei




Cevaplar:


Oluşturduğunuzda IFRAME tarayıcı otomatik olarak bir 'window' IFRAME için nesne 'window' ana sayfanın nesnesi.

Büyüklüğünü değiştirmeniz gerekiyor IFRAME Belgenin boyutu yerine.

Bu kodu deneyin:

İçin JavaScript:

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

Ve için jQuery:

$('#myframe', window.parent.document).width('500px');
$('#myframe', window.parent.document).height('500px');

32
2017-08-27 04:01



Sanırım bu farklı bir alandan yapılamaz, değil mi? - Anoyz
Evet, Chrome'da şu mesajla farklı alanlar başarısız oluyor: Uncaught SecurityError: Blocked a frame with origin "http://anotherwebsite.com" from accessing a frame with origin "http://mywebsite.com". Protocols, domains, and ports must match. - Zanon
Bu hatayı alamıyorum. Kavramın bir kanıtı olarak: jperelli.com.ar/covert_channel_iframe_resize - jperelli
@jperreli etki alanınızdaki bir alt alandan iframe ekliyorsunuzdur, bu muhtemelen işe yaramaktadır? - Functional Rocking
Harikasın! kod / yardım için teşekkürler! - Nelson


Her iki sayfa aynı etki alanındaysa (veya document.domain'i ayarladıysanız alt etki alanı bile, test etmediyseniz) javascript'ten (veya jQuery'ye) ayarlayabilirsiniz:

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

Sayfalar farklı alan adlarındaysa, iFrame adını veren sayfada (Marty Mulligan'a kredi) bir etkinlik dinleyicisi eklemek bir çözüm olacaktır:

<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>

ve iFrame içeriğinden (frame.html) tetikleyin:

<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>


13
2017-12-11 14:12



Çok iyi açıkladı! Benim için çalıştı! - Ankur Raiyani
Farkında olmak için büyük güvenlik riski - aracılığıyla MDN: tl; Dr. Diğer sitelerden mesaj almayı beklemiyorsanız, ileti olayları için herhangi bir olay dinleyicisini eklemeyin, her zaman gönderenin kimliğini doğrulayın ve başka pencerelere veri göndermek için postMessage kullandığınızda * her zaman kesin bir hedef kaynağı belirtin. - Sarah Wever


function setHeight() {
    parent.document.getElementById('the-iframe-id').style.height = document['body'].offsetHeight + 'px';
}

Başka bir yol kullanma Javascript

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

DEMO JSFIDDLE


-1
2017-08-27 03:41