Динамическая высота iframe не работает в хромированном состоянии

Question

im сходит с ума здесь. я нашел сценарий здесь, что якобы будет работать на хром, как хорошо, но я просто не могу заставить его работать

вот скрипт в моем заголовке

<script type="text/javascript"> 
function resizeFrame() { 
    var t=document.getElementById("Footer"); 
    var f = document.getElementById("mainContent"); 
    var y = f.contentWindow; 
    t.innerHTML = y.document.body.offsetHeight; 
    f.height = y.document.body.offsetHeight; 
    } 
</script> 

и IFRAME

<iframe onload="resizeFrame()" id="mainContent" src="swwbookpg1.php" scrolling=auto frameborder=0 
height="100%" width="100%">Working!</iframe> 
<p id="Footer"> Footer</p> 

работает в firefox и IE, но не в хроме.

Если кто-то может помочь, это будет потрясающе!

здесь используется: https://www.whalewatchingsydney.com.au/payment_sww/

спасибо =)

Answer 1

Google, кажется, живут до их слоганом "не делали никакого зла". Хотя Chrome способен динамически регулировать высоту iframe, Google не делает это очень легко. После двух дней борьбы с проблемой и попыток тонких фрагментов javascript, которые отлично работали в любом другом браузере, но Chrome, я, наконец, смог получить что-то, что сработает. Я поделюсь этим, чтобы надеяться, что другим разработчикам сайта хватит 48 часов, которые мне пришлось пройти.

Внутренний внешний файл SetiFrameHeight.js, который затем может быть добавлен в любой дочерний документ iframe с помощью html.

<script type="text/javascript" src="SetiFrameHeigh.js"></script> 

setIframeHeight.js

window.onload=setIframeHeight(window.top.document.getElementById('iFrame_ID')); 
//note this code only runs serverside when using Google Chrome, very helpful 


function setIframeHeight(ifrm){ 
    var doc = ifrm.contentDocument? ifrm.contentDocument: 
    ifrm.contentWindow.document; 
    var RestHeight=ifrm.style.height; //Capture original height see why below. 
    ifrm.style.visibility = "hidden"; 
    ifrm.style.height = "10px"; //Necessary to work properly in some browser eg IE 
    var NewHeight = getDocHeight(doc) + 10; 
    if (NewHeight>20){ 
     ifrm.style.height=NewHeight + "px"; 
    } else { //if dom returns silly height value put back old height see above. 
     ifrm.style.height=RestHeight + "px"; 
    } 
    ifrm.style.visibility = "visible"; 
} 

function getDocHeight(doc) { 
    doc = doc || document; 
    var body = doc.body, html = doc.documentElement; 
    var height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, 
    html.scrollHeight, html.offsetHeight); 
    return height; 
} 

Реальная магия этого фрагмента кода функция getDocHeight, которая в основном пытается все возможные комбинации Dóm и выбирает тот, который дает максимальную высоту. Я не могу взять кредит за то, что получил его от http://www.christersvensson.com/html-tool/iframe.htm.

Answer 2

Chrome:

1. Я обнаружил, что, когда я создаю IFrame с document.createElement и присвоить ему имя («myIframe»), новый не плавающий фрейм загрузки содержимого, когда я установил его местоположение , Но если я назначу url для src элемента, он отлично работает. Теперь, когда вместо этого я вручную вставил теги iframe в текст html (static - в отличие от использования document.createElement), он загрузил бы документ при настройке своего местоположения (а также src тега). Странный.

2. Предполагая, что вы намерены отображать содержимое iframe напрямую, интересно, почему? Мне нравится использовать iframes, но на самом деле только для динамической загрузки содержимого в контейнер в моем верхнем окне. Последняя часть html, загружаемая в iframe, включает скрипт, который перемещает вывод в нужное место верхнего кадра.

Пример скрипта php, который загружает новый контент через iFrame.

// top Frame calls the php script like this: 

<div id="myContainerDiv"> 
    <p>old content - please replace me with fresh content</p> 
</div> 


<iframe name="hiddenFrame" style="display:none;"></iframe> 

<script> 

    hiddenFrame.location = 'index.php?getNewContent=125'; 

</script> 


// the following script would be at the top of index.php 

<?php // 

if(isset($_GET['getNewContent'])): 


echo '<div id="myIframeHtml">'; 

    // the html that I want to load to the top frame.. 


echo '</div>'; 

?> 
<script> 

    newContent = document.getElementById('myIframeHtml').innerHTML; // from this iFrame 

    topContainer = top.document.getElementById('myContainerDiv'); // in top frame 

    topContainer.innerHTML = newContent; // no fuss-no muss --> no encoding or parsing 

</script> 

<?php 

exit; 

endif;