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

阿伦·H

我正在尝试构建一个基本的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的内容。

可汗

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>';
}

除此之外,onchangein元素的使用也算作内联JS,这是默认CSP所不允许的

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用Chrome扩展程序更改DOM内容

来自分类Dev

使用DevTools的Chrome扩展程序

来自分类Dev

Chrome扩展程序内容脚本访问扩展程序框架

来自分类Dev

更改Chrome扩展程序的现有“扩展程序ID”

来自分类Dev

Chrome扩展程序问题,更改了textarea内容

来自分类Dev

在Chrome扩展程序中停止内容脚本

来自分类Dev

Chrome扩展程序如何更改语言?

来自分类Dev

chrome扩展程序图标未更改

来自分类Dev

Chrome扩展程序-更改弹出窗口

来自分类Dev

Chrome扩展程序图片更改未持久

来自分类Dev

Chrome扩展程序:更改pageLoad的背景颜色

来自分类Dev

chrome扩展程序图标未更改

来自分类Dev

Chrome 扩展程序更改 google serp 分页

来自分类Dev

Chrome扩展程序-Google API的Javascript起源

来自分类Dev

Javascript Chrome扩展程序未显示结果

来自分类Dev

在Chrome扩展程序中正确链接JavaScript

来自分类Dev

HTML无法识别JavaScript(Chrome扩展程序)

来自分类Dev

使用Postman Chrome扩展程序发送多部分/混合内容

来自分类Dev

使用Postman Chrome扩展程序发送多部分/混合内容

来自分类Dev

使用背景页面和内容脚本的Chrome扩展程序

来自分类Dev

在Chrome扩展程序中使用Facebook SDK

来自分类Dev

无法使用Chrome扩展程序的Keydown

来自分类Dev

AngularJS在Chrome扩展程序中使用eval

来自分类Dev

使用cronjob定期运行Chrome扩展程序

来自分类Dev

在Chrome扩展程序中使用细分IO

来自分类Dev

如何使用Chrome扩展程序影响网站

来自分类Dev

使用Chrome扩展程序运行js文件

来自分类Dev

在Chrome扩展程序中使用Google图表

来自分类Dev

使用AppleScript定位Chrome扩展程序