如何從Chrome擴展插入帶有動態HTTPS源的iframe？

我們爲Google Chrome，Firefox和Safari開發瀏覽器擴展。我們需要在我們的Chrome擴展程序中的收件箱中插入iframe（https://inbox.google.com/）。我創建了一個JavaScript代碼，該代碼使用jQuery將iframe插入頁面。下面是代碼：如何從Chrome擴展插入帶有動態HTTPS源的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，但我收到另一個錯誤消息，指出不允許使用內聯腳本。

來源

2014-12-04 Uri

你的HTML片段：

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

注意，腳本是#iframe元素之前加入到DOM是存在的。

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

從理論上講，擺脫特定錯誤所需的一切就是切換兩個標籤。

來源

2014-12-04 10:52:28 Xan

如何從Chrome擴展插入帶有動態HTTPS源的iframe？

回答

相關問題