Farklı domaine sahip iframe boyutunu dinamik olarak nasıl ayarlarım.
Veritabanından iş ilanları için şirketlerin kendi için oluşturduğu ilan sayfalarınının urllerini alıp iframe ile bastırıyoruz.
Sıkıntı şu.
Diyelim iframe urli https://www.iframe.com
Sitemizin url ise https://www.website.com
<iframe id="myIframe" width="100%" height="100%" src="@x.Url"></iframe>
<script>
function resizeIframe(iframe) {
iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
}
document.addEventListener("DOMContentLoaded",()=>{
let iframe= document.getElementById("myIframe")
resizeIframe(iframe)
window.addEventListener("resize",()=>{
resizeIframe(iframe)
})
})
</script>
burada domain isimleri farklı olduğundan bu kod işe yaramıyor.
böyle durumlarda nasıl çözüm bulduklarını biraz araştırdım ve postMessage diye bir yöntem varmış iframe ile sitemiz arasında iletişim kurup sitemizin domainin de bu iframe kullanılırsa istediğimiz sonuçları alırız diye. Ama her şirkete de ulaşmak imkansız o yüzden bunu da yapamıyoruz. Böyle bir durumla karşılaşan ve buna bir çözüm bulmuş biri cevap yazabilirse sevinirim. İframe boyutunu ayarladıktan sonra scroll çıkmayacak şekilde ayarlamak gerekiyor.
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (1)
Iframe url düzenleme işlemi
https://codepen.io/f10tme/pen/bGZNvbW
<iframe width="500" height=500 src="https://bloxd.io"></iframe>
<button id="urlEditBtn" onclick="iframeUrlEdit('https://example.com');">Url değiştir</button>
function iframeUrlEdit(newUrl) {
let iframe = document.querySelector("iframe");
iframe.setAttribute("src",newUrl);
}
//iframeUrlEdit("https://seninsiten.com");
//iframeUrlEdit("data:text/html,<h1>merhaba</h1>");