크롬 확장 - 자바 스크립트로 내용 변경

Question

기본 크롬 확장을 빌드하려고합니다. 간단한 선택 메뉴로 팝업이 열리 며, 변경시 자바 스크립트가 실행됩니다. 간단한 권리?

<script src="popup2.js"></script> 
    <select id="MySelectMenu" onchange="newSrc()"> 
        <option value="http://electro.piratefm.ro/popup.html" >Electro</option> 
        <option value="http://rap.piratefm.ro/popup.html" >Rap</option> 
        <option value="http://dub.piratefm.ro/popup.html" >Dub</option> 
    </select> 

    <iframe src="http://electro.piratefm.ro/popup.html" frameborder="0" width="302" height="75" style="float:left" id="MyFrame"></iframe> 

물론

음악 재생이 시작하지만이 옵션을 변경할 때 그냥 삭제되지 않습니다, 또는 변경,

내가 아이콘을 클릭

function newSrc(){ 
document.getElementById('MyFrame').innerHTML= '<iframe src="#" width="100" height="100"></iframe>'; 
} 

는 팝업이 좋은 시작 popup2.js iframe의 내용

Answer 1

innerHTML은 요소 자체가 아니라 자식 만 변경합니다.

수정하려면 컨테이너에 포장하십시오.

<div id="MyFrameContainer"> 
    <iframe src="http://electro.piratefm.ro/popup.html" frameborder="0" width="302" height="75" style="float:left" id="MyFrame"></iframe> 
</div> 

과 별개로

function newSrc(){ 
    document.getElementById('MyFrameContainer').innerHTML= '<iframe src="#" width="100" height="100"></iframe>'; 
} 

---

, not allowed by the default CSP 인 인라인 JS 등의 원소 개수에 onchange의 용도.

당신은 당신의 popup2.js에서 동적 이벤트 핸들러를 제거하고 결합해야합니다

document.addEventListener('DOMContentLoaded', function(){ 
    document.getElementById('MySelectMenu').addEventListener('change', newSrc); 
});