Javascript Chrome扩展:在用户单击iframe时设置操作
我有一个浏览器扩展,显示一个菜单,加载到iframe中。我选择了此设置,因此可以更新菜单,而无需更新浏览器扩展名。菜单中的某些操作会导致页面发生更改。不过,我遇到的(关键)问题是,到目前为止,我还没有成功地检测到用户何时单击iframe中的按钮 根据我的理解,最好是有一个content.js的监听器,但如果可行,很乐意使用任何其他方法:) content.js中加载菜单的函数,包括不起作用的侦听器:Javascript Chrome扩展:在用户单击iframe时设置操作,javascript,iframe,google-chrome-extension,Javascript,Iframe,Google Chrome Extension,我有一个浏览器扩展,显示一个菜单,加载到iframe中。我选择了此设置,因此可以更新菜单,而无需更新浏览器扩展名。菜单中的某些操作会导致页面发生更改。不过,我遇到的(关键)问题是,到目前为止,我还没有成功地检测到用户何时单击iframe中的按钮 根据我的理解,最好是有一个content.js的监听器,但如果可行,很乐意使用任何其他方法:) content.js中加载菜单的函数,包括不起作用的侦听器: function showMenu() { // Avoid recursive frame
function showMenu() {
// Avoid recursive frame insertion...
var extensionOrigin = 'chrome-extension://' + chrome.runtime.id;
if (!location.ancestorOrigins.contains(extensionOrigin)) {
var iframe = document.createElement('iframe');
// Must be declared at web_accessible_resources in manifest.json
iframe.src = chrome.runtime.getURL('menu.html');
// Some styles for a fancy sidebar
iframe.style.cssText = "\
position:fixed;\
bottom:33%;\
right:0px;\
width:47px;\
height:198px;\
margin:0;\
padding:0;\
border:none;\
overflow:hidden;\
background:transparent;\
z-index:999999;\
";
document.body.appendChild(iframe);
menuListener(iframe);
}
}
function menuListener()
{
jQuery(document).on("click", '#click-me', function() {
alert('Works!');
});
}
menu.html是扩展的一部分,是可访问的web资源:
<style>
html, body, iframe, h2 {
margin: 0;
padding: 0;
border:none;
display: block;
width: 100vw;
height: 100vh;
background: transparent;
color: black;
}
h2 {
height: 50px;
font-size: 20px;
}
iframe {
height: calc(100vh - 50px);
}
</style>
<iframe id="rpm-menu" src="https://www.example.com/"></iframe>
html,body,iframe,h2{
保证金:0;
填充:0;
边界:无;
显示:块;
宽度:100vw;
高度:100vh;
背景:透明;
颜色:黑色;
}
氢{
高度:50px;
字体大小:20px;
}
iframe{
高度:计算(100vh-50px);
}
然后单击外部页面上的div:
<div id="click-me" class="menu-icon">
<p>CLICK</p>
</div>
点击
看来消息API将是解决这一问题的最佳方法,因为我需要向两个方向传递更多信息
嘿@Vincent,如果我没弄错你的问题,我想这可能会对你有所帮助。看起来很合适,谢谢。本周晚些时候,我将在这里完成并发布反馈。