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

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

P.S。：最终目标是获取iframe中元素的大小，以便我可以使用postMessage来适当调整iframe主机的大小。

Answer 1

这是Chrome扩展程序的已知问题。

iFrame的＆＃39; 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, "*");
}

Answer 2

我建议为要显示的网址制作一个ajax GET，接受html响应，添加一个脚本标记，将postMessage与您的父框架（您的扩展代码）一起使用，然后将iframe的src设置为数据网址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插入到没有src属性的iframe中，因为javascript不会运行。如果你正在寻找互联网上任何常规页面的iframe，我会有一些鼓励你做的事情，你可以给我发消息。

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

2 个答案: