Получение содержимого iframe вызывает TypeError: «undefined» не является объектом

Question

Функция ниже предназначена для захвата / обработки HTML-кода селектора jQuery или URL-адреса. Если передается URL-адрес, он генерирует iframe и после загрузки iframe получает HTML-код iframe. ( Примечание. Я не использую внешние URL-адреса, просто другие страницы на том же сайте. )

Функция выдает TypeError: 'undefined' is not an object (evaluating 'myHTML.find') всякий раз, когда я передаю URL. Я не понимаю почему. Здесь что-нибудь выделяется?

1   mynamespace.html: function ( source ) {
2   // Grabs and processes the HTML of a jQuery selector or URL.
3      
4      var myHTML;
5
6         if ( $(source).is('iframe') ) {
7            // if it's an iframe, use .contents() 
8            myHTML = $(source).contents().find('html').clone();
9
10        } else if (source.indexOf('http://') === 0 ) {
11           // if it's a URL, load an iframe
12           $(document.body).append('<iframe id="printiframe" src="'+source+'"></iframe>');   
13           $('#printiframe').load(function() {
14               // once loaded, send it back into this function,
15               // where it can then be processed as an iframe
16               return mynamespace.html ('#printiframe');
17           });
18
19        } else {
20           myHTML = $(source).clone();
21        }   
22      
23        // Do stuff to the HTML here, such as myHTML.find('bla')...
24
25        return myHTML.html();
26   }

Answer 1

Надеюсь, вы не возражаете, но я отредактировал ваш вопрос, добавив номера строк в код для удобства ссылок, а не повторяя весь код здесь.

В любом случае, я считаю, что проблема в том, что ветка else if начинается в строке 10. Последовательность выполнения будет такой:

• Строка 12 - добавить фрейм
• Строка 13 - сделать запрос ajax .load()
• Линии 18/19 - конец ветви
• Строки 22-24 - там, где у вас есть комментарий о выполнении вещи, в этот момент myHTML не было присвоено значение (отсюда и ошибка, которую вы получаете)
• Строка 25 - возврат из функции

Затем, после асинхронного запроса Ajax, возвращается:

• Строка 16 - тело предоставленной вами функции обратного вызова.

Именно так работает асинхронный код - независимо от того, насколько быстро выполняется запрос, обратный вызов не будет вызываться до тех пор, пока не завершится выполнение другого кода. Оператор return в строке 16 не возвращается из вашей функции mynamespace.html(), он возвращается из этого обратного вызова (и ничто не обращает внимания на это возвращение).

Вы можете попытаться немного реструктурировать свой код, чтобы использовать синхронный ajax-запрос, в этом случае выполнение будет приостановлено в строке 13 до тех пор, пока ответ не вернется, но это плохо для пользователя, поскольку браузер не будет отвечать на запросы.

Лучше реструктурировать, чтобы придерживаться стандартного aysnc Ajax, и учитывать порядок выполнения, который я описал выше. Не зная, как называется ваш mynamespace.html(), я не уверен, что смогу дать вам совет.

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

Вы не говорите, какие типы URL вы вводите, но в общем смысле JavaScript, работающий в одном кадре, не может получить доступ к содержимому другого кадра, если источник находится в другом домене.

(Существуют некоторые обходные пути, позволяющие междоменным фреймам взаимодействовать друг с другом, но только в том случае, если оба они взаимодействуют, чего здесь не будет).