如何将iframe面板注入Google Chrome扩展程序并在iframe内添加点击事件？ [英] how to inject an iframe panel to a Google Chrome extension and add click event inside the iframe?

问题描述

我做了一个扩展，使用Content-scripts将iframe注入当前网页：

  $（'body'） .append（'< iframe src =''+ chrome.extension.getURL（'panel.html'）+'frameborder =0style =border-top-width：0px; border-right-width：0px ; border-bottom-width：0px; border-left-width：0px; border-style：initial; border-color：initial; z-index：2147483647; position：fixed; width：100％; left：0px; bottom： 0px; height：100px; display：block; visibility：visible; outline-style：none; outline-width：0px; outline-color：rgb（0，0，0）;id =GE_Panel><的iframe>'）; 
  

我可以在网页中查看iframe，但我不知道如何添加click事件一个元素，在iframe里面......

解决方案

你必须等到iframe加载完成后才能访问里面的元素

例如

  $（'< iframe。 （...）。/>'）。load（function（）{
 var doc = $（this）.contents（）; 
 doc.find（'＃yourLink'）。click（...） ; 
}）。appendTo（'body'）; 
  

参考： .contents

不知道Chrome如何处理扩展名，但它可能是因为您有同源政策问题。

I did an extension that inject iframe to the current webpage, using Content-scripts:

$('body').append('<iframe src="' + chrome.extension.getURL('panel.html') + '" frameborder="0" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; z-index: 2147483647; position: fixed; width: 100%; left: 0px; bottom: 0px; height: 100px; display: block; visibility: visible; outline-style: none; outline-width: 0px; outline-color: rgb(0, 0, 0); " id="GE_Panel"></iframe>');

I can view the iframe in the webpage, but I don't know how to add click event for an element, that inside the iframe...

解决方案

You have to wait until the iframe has loaded and then access the elements inside of it:

E.g.

$('<iframe ... />').load(function() {
    var doc = $(this).contents();
    doc.find('#yourLink').click(...);
}).appendTo('body');

Reference: .contents

Not sure how Chrome handles this for extensions, but it could be that you will have a same-origin policy problem.

这篇关于如何将iframe面板注入Google Chrome扩展程序并在iframe内添加点击事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！