对于Chrome上动态加载的iframe，未定义contentWindow

contentWindow is undefined for dynamically loaded iframe on Chrome

本文关键字：iframe 未定义 contentWindow 加载 Chrome 动态 对于      更新时间：2023-09-26

我正在编写一个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

提前感谢您提出的任何想法。

附言：最终目标是获得iframe中元素的大小，这样我就可以使用postMessage适当地调整iframe主机的大小。

这是Chrome扩展的一个已知问题。

iFrame的contentWindow和contentDocument属性是undefined。window.frames也是空的。结果是不能使用postMessage向下通信到iFrame中。

请参阅http://code.google.com/p/chromium/issues/detail?id=20773

您可以通过使用与iframe的src匹配的内容脚本来访问帧的window，从而使用postMessage API与之通信

下面是一个示例，它获取所有chrome消息，并将它们作为iframe:中的消息事件进行激发

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

我建议对要显示的url进行ajax GET，获取html响应，添加一个脚本标记，该标记将使用postMessage作为父框架（扩展代码），然后将iframe的src设置为base64编码数据的数据url。阅读一些代码更容易：

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插入到没有src属性的iframe中，因为不会运行javascript。如果你想在互联网上浏览任何常规页面，我有一些东西可以帮你做，你可以给我发信息。

相关文章：