如何从 Chrome 扩展插入带有动态 HTTPS 源的 iframe？答案

【问题标题】：How do I insert an iframe with dynamic HTTPS source from a Chrome extension?如何从 Chrome 扩展插入带有动态 HTTPS 源的 iframe？
【发布时间】：2014-12-04 10:38:27
【问题描述】：

我们为 Google Chrome、Firefox 和 Safari 开发浏览器扩展。我们需要在 Chrome 扩展程序的收件箱 (https://inbox.google.com/) 中插入一个 iframe。我创建了一个 JavaScript 代码，它使用 jQuery 将 iframe 插入到页面中。代码如下：

JavaScript 代码：

var $container = jQuery('<div id="ws_login_overlay" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; z-index: 9999999; background: rgba(64, 64, 64, 0.8);"></div>');
$container.append('<iframe width="760" height="510" id="myframe" style="border: 1px solid grey; margin: 80px auto 0px auto; display: table; border-radius: 8px;" src="'+Utils.getUrl("content/login/login_iframe.html?url="+encodeURIComponent(WS.config.URLs.website.web_login+'#'+reply.ws_uid))+'"></iframe>');
jQuery("body").append($container);

Utils.getUrl = function(filename, preferSecure) {
    return WS.getURL(filename, preferSecure);
};

/* Function to retrieve the relative URL/URI of a file in the platform's file system. */
WS.getURL = function(filename, preferSecure) {
    if (typeof filename !== "string") {
        filename = "";
    } else if (filename.substr(0, 1) === "/") { /* Remove forward slash if it's the first character, so it matches with the base URLs of the APIs below. */
        filename = filename.substr(1);
    }

    switch (Sys.platform) {
        case 'chrome':
            return chrome.extension.getURL(filename);
    }
};

login_iframe.html：

<style>
html, body, iframe {
    margin: 0;
    border: 0;
    padding: 0;
    display: block;
}
</style>
<script src="login_iframe.js"></script>
<iframe id="iframe"></iframe>

login_iframe.js：

// Get URL parameter.
function GetURLParameter(sParam) {
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) {
        var sParameterName = sURLVariables[i].split('=');
        if ((sParameterName.length >= 2) && (sParameterName[0] === sParam)) {
            return decodeURIComponent(sParameterName[1]);
        }
    }
    return null;
}

document.getElementById("iframe").src = GetURLParameter("url");

我还在manifest.json 中添加了"content/login/login_iframe.html" 到"web_accessible_resources"。但我在控制台中收到这些错误消息：

login_iframe.js:14 Uncaught TypeError: Cannot set property 'src' of null
rs=AItRSTPbuBGKt-Gq9QZ6xBfrjWRS7py0HA:13055 'webkitCancelRequestAnimationFrame' is vendor-specific. Please use the standard 'cancelAnimationFrame' instead.
login_iframe.js:14 Uncaught TypeError: Cannot set property 'src' of null

问题是什么，为什么document.getElementById("iframe") 返回null，为什么我会收到两次此错误消息？

我还尝试将login_iframe.js 作为内联脚本插入login_iframe.html，但我收到另一条错误消息，提示不允许内联脚本。

【问题讨论】：

标签： javascript iframe google-chrome-extension browser-extension inbox

【解决方案1】：

你的 HTML sn-p：

<script src="login_iframe.js"></script>
<iframe id="iframe"></iframe>

请注意，该脚本是在 #iframe 元素出现之前添加到 DOM 中的。

它是同步执行的，但 document.getElementById("iframe") 返回 null - 因为该元素尚未添加到 DOM。

理论上，消除该特定错误所需要做的就是切换两个标签。

【讨论】：