Відкликання Javascript, коли IFRAME закінчується завантаженням?

Мені потрібно виконати зворотний виклик, коли завантаження IFRAME закінчиться. У мене немає контролю над вмістом в IFRAME, тому я не можу запустити зворотний виклик звідти.

Цей IFRAME програмно створений, і мені потрібно передавати його дані як змінну в зворотному дзвінку, а також знищити iframe.

Будь-які ідеї?

Редагувати:

Ось що я маю зараз:

function xssRequest(url, callback)
{
    var iFrameObj = document.createElement('IFRAME');
    iFrameObj.src = url;            
    document.body.appendChild(iFrameObj);   

    $(iFrameObj).load(function() 
    {
        document.body.removeChild(iFrameObj);
        callback(iFrameObj.innerHTML);
    });
}

Це зворотний дзвінок перед завантаженням iFrame, тому зворотний виклик не повертає даних.

Спершу вгору, перейшовши за назвою функції xssRequest, це здається, що ви намагаєтеся перейти на запит між веб-сайтами, а якщо це правильно, ви не зможете читати вміст iframe.

З іншого боку, якщо URL-адреса iframe знаходиться у вашому домені, ви можете отримати доступ до тіла, але я виявив, що якщо я використаю тайм-аут для видалення iframe, зворотний виклик спрацьовує добре:

// possibly excessive use of jQuery - but I've got a live working example in production
$('#myUniqueID').load(function () {
  if (typeof callback == 'function') {
    callback($('body', this.contentWindow.document).html());
  }
  setTimeout(function () {$('#frameId').remove();}, 50);
});

Я використовую jQuery, і дивно, здається, це завантажується, оскільки я щойно тестував і завантажував важку сторінку, і я не отримував попередження протягом декількох секунд, поки не побачив завантаження iframe:

$('#the_iframe').load(function(){
    alert('loaded!');
});

Отже, якщо ви не хочете використовувати jQuery, подивіться на їх вихідний код і побачите, чи поводиться ця функція по-різному з елементами DOM iframe, я перегляну її на себе пізніше, як мені це цікаво, і опублікуйте тут. Також я протестував лише на останньому хромі.

Внутрішня HTMLML вашого iframe порожня, оскільки ваш тег iframe не оточує жоден вміст у батьківському документі. Щоб отримати вміст зі сторінки, на яку посилається атрибут src iframe, вам потрібно отримати доступ до властивості iframe contentDocument. Виняток буде закинуто, якщо src походить з іншого домену. Це функція безпеки, яка не дозволяє вам виконувати довільний JavaScript на чужій сторінці, що створило б уразливість сценаріїв між сайтом. Ось приклад коду, який ілюструє те, про що я говорю:

<script src="http://prototypejs.org/assets/2009/8/31/prototype.js" type="text/javascript"></script>

<h1>Parent</h1>

<script type="text/javascript">
function on_load(iframe) {
  try {
    // Displays the first 50 chars in the innerHTML of the
    // body of the page that the iframe is showing.
    // EDIT 2012-04-17: for wider support, fallback to contentWindow.document
    var doc = iframe.contentDocument || iframe.contentWindow.document;
    alert(doc.body.innerHTML.substring(0, 50));
  } catch (e) {
    // This can happen if the src of the iframe is
    // on another domain
    alert('exception: ' + e);
  }
}
</script>
<iframe id="child" src="iframe_content.html" onload="on_load(this)"></iframe>

Щоб продовжити приклад, спробуйте використовувати це як вміст iframe:

<h1>Child</h1>

<a href="http://www.google.com/">Google</a>

<p>Use the preceeding link to change the src of the iframe
to see what happens when the src domain is different from
that of the parent page</p>

Мені довелося це робити в тих випадках, коли документи, такі як word docs та pdfs, передавались до iframe і знаходили рішення, яке працює досить добре. Ключ - це обробка onreadystatechangedподії на iframe.

Скажімо, назва вашого кадру - "myIframe". Спочатку десь у вашому запуску коду (я роблю це в рядку будь-де, де після iframe) додайте щось подібне, щоб зареєструвати обробник події:

document.getElementById('myIframe').onreadystatechange = MyIframeReadyStateChanged;

Мені не вдалося використати атрибут onreadystatechage в iframe, не можу пригадати чому, але додаток повинен був працювати в IE 7 і Safari 3, так що це може бути фактором.

Ось приклад того, як отримати повний стан:

function MyIframeReadyStateChanged()
{
    if(document.getElementById('myIframe').readyState == 'complete')
    {
        // Do your complete stuff here.
    }
}

Я хотів приховати очікуючий спінер div, коли контент i кадру повністю завантажений на IE, я спробував буквально кожне рішення, згадане в Stackoverflow.Com, але ні з чим не працювало так, як я хотів.

Тоді у мене виникла ідея, що коли вміст кадру i завантажується повністю, подія завантаження $ (Window) може бути запущена. І саме так сталося. Отже, я написав цей маленький сценарій, і працював як магія:

     $(window).load(function () {
     //alert("Done window ready ");
     var lblWait = document.getElementById("lblWait");
     if (lblWait != null ) {
         lblWait.style.visibility = "false";
         document.getElementById("divWait").style.display = "none";
     }
 });

Сподіваюся, це допомагає.

У мене була така ж проблема, як у вас. Що я зробив, це те, що я використовую те, що називається jQuery. Що ви потім робите в коді javascript:

$(function(){ //this is regular jQuery code. It waits for the dom to load fully the first time you open the page.

    $("#myIframeId").load(function(){
       callback($("#myIframeId").html());
       $("#myIframeId").remove();

    });

});

Здається, ви видаляєте iFrame перед тим, як захопити html з нього. Тепер я бачу проблему з цим: p

Сподіваюся, це допомагає :).

Я маю подібний код у своїх проектах, який чудово працює. Пристосовуючи мій код до своєї функції, рішенням може бути таке:

function xssRequest(url, callback)
{
    var iFrameObj = document.createElement('IFRAME');
    iFrameObj.id = 'myUniqueID';
    document.body.appendChild(iFrameObj);       
    iFrameObj.src = url;                        

    $(iFrameObj).load(function() 
    {
        callback(window['myUniqueID'].document.body.innerHTML);
        document.body.removeChild(iFrameObj);
    });
}

Можливо, у вас порожній внутрішній HTML-код, оскільки (одна чи обидві причини): 1. ви повинні використовувати його проти елемента body 2. ви видалили iframe зі своєї сторінки DOM

Я думаю, що подія навантаження правильна. Неправильно - це спосіб, який ви використовуєте для відтворення контенту з iframe content dom.

Вам потрібен html сторінки, завантаженої в iframe, а не html об’єкта iframe.

Що вам потрібно зробити, це отримати доступ до документа зі змістом iFrameObj.contentDocument. Це повертає домен сторінки, завантаженої всередині iframe, якщо вона знаходиться на тому самому домені поточної сторінки.

Я б відновив вміст перед тим, як видалити iframe.

Я випробував фаєрфокс та оперу.

Тоді я думаю, ви можете отримати свої дані за допомогою $(childDom).html()або$(childDom).find('some selector') ...

У мене була та сама проблема в минулому, і єдиний спосіб, який я вирішив це виправити, - це додавання зворотного дзвінка на сторінку iframe. Звичайно, це працює лише тоді, коли ви маєте контроль над вмістом iframe.

Використання onloadattrbute вирішить вашу проблему.

Ось приклад.

function a() {
alert("Your iframe has been loaded");
}

<iframe src="https://stackoverflow.com" onload="a()"></iframe>

Це те, чого ти хочеш?

Клацніть тут для отримання додаткової інформації.