Question

我正在尝试构建一个基本的Chrome扩展程序，它会打开一个带有简单选择菜单的弹出窗口，该菜单会在更改时执行javascript。简单吧？

    <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>

当然还有popup2.js

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

我点击图标，弹出窗口开始正常，音乐开始播放，但是当我更改选项时，它只是不会删除，或者更改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>';
}

除此之外，在元素中使用onchange计为内联JS，即not allowed by the default CSP。

您应该删除它并从popup2.js动态绑定事件处理程序：

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

Chrome扩展程序 - 使用javascript更改内容

1 个答案: