Как вызвать событие onload при загрузке файла в iframe? - PullRequest
Новая
       30

Как вызвать событие onload при загрузке файла в iframe?

11 голосов
/ 06 октября 2009

Предположим, у нас есть следующий HTML-файл: 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test iframe download</title>
<script type="text/javascript">

var init = 0;

function download() {
  document.getElementById("dload_frame").src = "http://example.com/dload.py";
}

function alert() {
  if (init == 0) {
    init = 1;
  }
  else {
    document.getElementById("alert_span").innerHTML = "Got it!";
  }
}

</script>
</head>
<body>

  <span id="alert_span">Main content.</span><br/>
  <input type="button" value="Download" id="btn" onclick="download()" />
  <iframe id="dload_frame" src="http://404.com/404" onload="alert()"> </iframe>

</body>
</html>

Теперь, если URL, на который перезаписывается src iframe (в данном случае - "http://example.com/dload.py"), возвращает HTML, нет проблем: событие onload срабатывает, содержимое диапазона заменяется, все счастливы.

Однако, если тип содержимого файла, возвращаемого URL-адресом, установлен на что-то, что заставляет браузер открыть диалоговое окно сохранения файла, событие загрузки iframe никогда не срабатывает.

Есть ли обходной путь? Использование iframes не обязательно, желаемое поведение - запуск обратного вызова после того, как браузер начнет загружать предоставленный файл.

Ответы [ 5 ]

2 голосов
/ 07 октября 2009

Я столкнулся с той же проблемой, что и эта: Вот мой обходной путь, пожалуйста, посмотрите, работает ли он для вас: 

<script>
 function download(){
    var url = 'http://example.com/dload.py';
    var htm = '<iframe src="' + url +'" onload="downloadComplete()"></iframe>';
    document.getElementById('frameDiv').innerHTML = htm;
 }
</script>

<div style="display:none" id="frameDiv">
</div>
<button onclick="download()">download file</button>

Насколько я помню, событие загрузки iframe срабатывает только один раз. Установка другого значения для атрибута src не приведет к повторному запуску события onload.

1 голос
/ 21 февраля 2013

Мое решение после многих различных подходов, чтобы заставить это работать через ff, т.е. safari и chrome, не было двухэтапной загрузки.

исходный запрос JS для создания iframe загружает src, который обычно загружал бы pdf Однако теперь src загружает страницу с еще одним iframe внутри, который теперь содержит URL-адрес pdf. в ответе html я запускаю функцию onload, а также функцию setTimeout catchall, которая вызывает мой ответ на функцию window.parent.window.handler, которой была бы моя загрузка на верхнем iframe. Результатом является загрузка PDF и триггер на родительском элементе верхнего уровня функции-обработчика, который работает во всех браузерах, поскольку он больше не зависит от фактической загрузки iframe, а скорее опирается на поддерживаемые отношения родительского / дочернего окна.

надеюсь, это поможет тому, кто тоже застрял

0 голосов
/ 12 октября 2017

Вы можете повторно проверять свойство iframe readyState через короткие промежутки времени, пока оно не будет завершено. 

function iframe_onload(iframe_id, js) {
    var iframe = document.getElementById(iframe_id);
    var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

    if (iframeDoc.readyState == 'complete') {
        eval(js)
        return;
    }

    window.setTimeout('iframe_onload("' + iframe_id + '",`' + js + '`);', 100);
}
0 голосов
/ 02 декабря 2009

У меня та же проблема, обработчик onLoad срабатывает только при изменении содержимого. Если вы загружаете файл. Если вы удаляете заголовок HTTP для печати содержимого файла в iframe, загрузка корректно запускается.

0 голосов
/ 06 октября 2009

Для этого вам может понадобиться помощь jquery, например, вы можете сделать это: 

$.get('http://example.com/dload.py',{},function(result){
   $('alert_span').html(result);//or some content
});
...