contentWindow не определено для динамически загружаемого iframe в Chrome

Question

Я пишу расширение Chrome (факт, который не должен (?) В этом случае).

Я добавляю iframe динамически, когда пользователь выбирает текст, как таковой:

var myframe = '<div id="modal-from-dom" class="modal hide fade" style="width: 673px;">' +
                   '<div class="modal-body">' +
                   '<iframe id="iFrameID" style="border: 0px;"   src="http://www.example.com/" height="240px" width="638px"></iframe>' +
                   '</div>' +
                   '</div>';

$('body').append(myframe);

Затем я продолжаю искать iFrame, пока не будет возвращен непустой объект.Затем я пытаюсь получить доступ к свойству contentWindow, которое в итоге не определено (хотя другие свойства, такие как src хороши):

$('#iFrameID').prop('contentWindow'); // undefined

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

PS: конечная цель - получить размер элемента внутри iframe, чтобы я мог соответствующим образом изменить размер хоста iframe, используя postMessage.

Answer 1

Это известная проблема с расширениями Chrome.

Атрибуты iFrames 'contentWindow и contentDocument равны undefined.window.frames тоже пусто.В результате вы не можете использовать postMessage для связи в iFrame.

См. http://code.google.com/p/chromium/issues/detail?id=20773

Вы можете обойти это, используя скрипт содержимого, соответствующий src iframe для получения доступа к window фрейма, что позволяет вам использовать API postMessage для связи с ним.

Вот пример, который принимает все сообщения Chrome и запускает их как события сообщений нав фрейме:

chrome.extension.onMessage.addListener = function(request, sender, sendResponse){
  // Pass on some messages context for local execution
  window.postMessage(request, "*");
}

Answer 2

Я бы порекомендовал сделать ajax GET для отображения URL, принять html-ответ, добавить тег сценария, который будет использовать postMessage с вашим родительским фреймом (вашим кодом расширения), а затем установить для src iframe значение url данных. закодированных в base64 данных. Проще прочитать код:

var iFrameID = $(document.getElementById('iFrameID')); //This is very efficient.

$.get('http://www.example.com', function(response) {
  postMessager = '<script>'+
    'window.postMessage ... '+ 

ссылка https://developer.mozilla.org/en/DOM/window.postMessage здесь

    '</script>'
  iFrameID.src = 'data:text/html;base64,' + utf8_to_b64(postMessager + response));
});

Где

function utf8_to_b64( str ) {
    return window.btoa(unescape(encodeURIComponent( str )));
}

function b64_to_utf8( str ) {
    return decodeURIComponent(escape(window.atob( str )));
}

В вашем коде расширения вам также понадобится код postMessage. Я знаю, что это не самая полная информация и код, но я надеюсь, что это укажет вам твердое направление. Будьте осторожны при вставке innerHTML в iframe без атрибута src, так как не будет работать javascript. И если вы хотите создать обычную страницу в интернете, у меня есть кое-что, что вы можете написать мне.