Chrome 확장 프로그램의 동적 HTTPS 소스가 포함 된 iframe을 삽입하려면 어떻게해야하나요?

Google은 Chrome, Firefox 및 Safari 용 브라우저 확장 프로그램을 개발합니다. Chrome 확장 프로그램의받은 편지함 (https://inbox.google.com/)에 iframe을 삽입해야합니다. jQuery를 사용하여 iframe을 페이지에 삽입하는 JavaScript 코드를 만들었습니다.Chrome 확장 프로그램의 동적 HTTPS 소스가 포함 된 iframe을 삽입하려면 어떻게해야하나요?

자바 스크립트 코드 :

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에 "web_accessible_resources"에 "content/login/login_iframe.html"을 추가 여기에 코드입니다.

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 코드 : 스크립트가 #iframe 요소 앞에 DOM에 추가됩니다

가

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

참고가있다.

동시에 실행되지만 document.getElementById("iframe")은 null을 반환합니다. 해당 요소가 아직 DOM에 추가되지 않았기 때문입니다.

이론상으로,이 특정 오류를 제거하려면 두 태그를 전환해야합니다.

출처

2014-12-04 10:52:28 Xan

Chrome 확장 프로그램의 동적 HTTPS 소스가 포함 된 iframe을 삽입하려면 어떻게해야하나요?

답변

관련 문제