JQuery IFrame Загрузка события запускается слишком рано - PullRequest
Новая
       16

JQuery IFrame Загрузка события запускается слишком рано

4 голосов
/ 15 августа 2011

Я тщетно пытался найти решение этой проблемы, но безрезультатно. В основном я пытаюсь использовать JQuery для создания нового диалога при нажатии кнопки на странице. Содержимое диалога содержит IFrame, ссылающийся на внешний (междоменный) контент. Внутри диалога я также хочу ссылку "назад" (изменится на кнопку позже), которая действует аналогично кнопке возврата браузера. Конечно, я мог просто заставить пользователя использовать обычную кнопку «назад», но это не так уж и интуитивно понятно, поэтому я хочу, чтобы кнопка «Назад» просто находилась внутри самого диалогового окна над фреймом.

Javascript для этого относительно прост с использованием объекта «history». Однако я хочу иметь возможность отключить / удалить эту «обратную» ссылку, когда подсчет истории превышает определенный уровень. Подробная информация о функции отключения достаточно тривиальна, однако мне нужно иметь возможность получить доступ к событию загрузки iframe, чтобы определить, когда контент завершил загрузку, чтобы значение history.length было правильным для целей моего теста. Однако событие загрузки, похоже, запускается слишком рано, и значение истории неверно во время запуска события загрузки. Значение истории кажется правильным при переходе «вперед», но после нажатия моей кнопки возврата назад значение истории больше не является правильным, так как кажется, что событие загрузки сообщает значение истории до загруженному iframe содержимое.

Вот мой текущий JavaScript: 

<script language="javascript" type="text/javascript">
var baseHistory = 0;

$(function() {
  $("body").append('<div id="RedmapDialog" title="Dialog Title"></div>');
  $(".RedmapButton").bind('click', function(event) {
    baseHistory = history.length;
    var data='<a href = "javascript:history.go(-1)">Back to previous page</a>'
    data = data + '<iframe width="100%" height="100%" id="RMFrame"></iframe>'
    $("#RedmapDialog").html(data);
    $("#RedmapDialog").dialog("option", "title", 'Document: ');
    $("#RedmapDialog").dialog("open");
    $('#RMFrame').load(function() {
      alert("history.length=" + history.length);
    }).attr("src", "http://www.google.com/");
  });

  $("#RedmapDialog").dialog({  
    closeOnEscape: false,    
    height: 600,
    width: 800,
    autoOpen: false,    
    resizable: true,
    autoResize:true,
    modal: false           
  });  
});

</script>

и вот вызывающий html: 

<div class="RedmapButton" style="cursor: pointer; cursor: hand;">
  <img src="/gui/images/bullseye.gif" width=26 height=26 alt="Redmap" title="Redmap">
</div>

Есть мысли о том, почему событие load вызывается так скоро после того, как я выбрал обратную ссылку? Я понимаю, что здесь присутствуют некоторые проблемы политики междоменных / однотипных источников, однако меня не интересует реальное содержание iframe, просто значение только history.length.

Редактировать: Обновлен этот пост, чтобы включить предложение ShankarSangoli для установки src моего iframe после его создания. Тем не менее, я все еще сталкиваюсь с первоначальной проблемой, из-за которой моя «обратная» ссылка все еще сообщает неверную историю Вот ссылка jsfiddle http://jsfiddle.net/fEgv9/1, которая иллюстрирует мою проблему. При запуске щелкните изображение «Redmap», чтобы отобразить iframe. Затем нажмите любую ссылку в Google, а затем нажмите мою ссылку «Вернуться на предыдущую страницу», обратите внимание, что история не сообщает правильно.

Заранее спасибо.

Ответы [ 2 ]

2 голосов
/ 15 августа 2011

В своем коде вы устанавливаете источник iframe, когда добавляете разметку в RedmapDialog и после этого подключается обработчик события загрузки.Прежде чем он достигнет этого кода, iframe должен быть уже загружен.Попробуйте установить источник iframe после того, как вы установили обработчик события загрузки iframe, как показано ниже 

$(".RedmapButton").bind('click', function(event) {
    baseHistory = history.length;
    var data='<a href = "javascript:history.go(-1)">Back to previous page</a>'
    data = data + '<iframe src="javascript:void(0);" width="100%" height="100%" id="RMFrame"></iframe>'
    $("#RedmapDialog").html(data);
    $("#RedmapDialog").dialog("option", "title", 'Document: ');
    $("#RedmapDialog").dialog("open");
    $('#RMFrame').load(function() {
      alert("history.length=" + history.length);
    }).attr("src", "http://www.google.com/");
  });
0 голосов
/ 15 августа 2011

Вы можете попробовать создать iframe с помощью jquery, затем прикрепить событие ready (not load) к созданному фрейму, назначить атрибут src и, наконец, добавить элемент в ваш div. Код будет выглядеть примерно так: 

$("<iframe />").ready(function(){ alert(this.location); }) //Use your function here
  .attr("src","www.slashdot.com")
  .appendTo(document.body); //Append to your div

Смысл готовности и загрузки в iframes заключается в том, что загрузка запускается, когда элемент DOMFrame создается и присоединяется к дереву DOM (независимо от его внутреннего состояния), в то время как готовность ожидает внутреннего состояния iframe.

...