我們爲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
,但我收到另一個錯誤消息,指出不允許使用內聯腳本。