从Iframe创建一个新的chrome选项卡/窗口 [英] Create a new chrome tab/window from a Iframe

问题描述

我有一个带搜索框的iframe，当我点击时我想让这个搜索框重定向去创建一个新的标签页/窗口

http://img51.imageshack.us/i/issuec.png/

所以要清楚，我的谷歌浏览器扩展调用为内容脚本：overlay.js然后这个将在当前页面的末尾放置我的overlay.html页面。

所以问题来自于我的.html表示为一个iframe，我不知道我可以如何从这个iframe重定向。

overlay.html

 < form id =searchFormaction =＃onsubmit = searchBoxRedirection（this）method =post> 
< img id =logosrc =images / extension.pngalt =Logo>< / img> 
< input type =searchvalue =name =searching> 
< input type =submitvalue =Go！ /> 
< / form> 
  

overlay.js

  var overlay = {
 init：function（）{
 this.injectoverlay（）; 
 // alert（'Initialisation reussie'）; 
}，
 
 injectoverlay：function（）{
 var body = $（'body'），
 overlayURL = chrome.extension.getURL（overlay.html ），
 iframe = $（'< iframe id =YouroverlayFramesrc =''+ overlayURL +'>'）; 
 
 body.append（iframe）; 
 iframe.show（）; 
 
 // alert（'Injection reussie'）; 
 
 
 
 
 $ b 
 Tool.js 
 函数searchBoxRedirection（form）
 {
 tabs.create（{url：www.yahoo.fr}）; 
 
  
 manifest.json 
 
 
 < pre $  {
 
background_page：background.html，
browser_action：
 {
default_icon ：images / Extension.png
}，
content_scripts：
 [{
all_frames：true，
css：[css / 
js：[js / overlay.js]，
matches：[http：// * / *]，
run_at ：document_start
}]，
permissions：[tabs，unlimitedStorage，http：// * / *]，
name：MyOverlay ，
version：1.1，
description：Sindar Overlay
} 
  




解决方案

由于您使用 Content-Scripts ，除了几个chrome.extensions之外，您无法调用任何Chrome API。* 下面是一些内容脚本可以执行的示例： / p>



文档引用

在网页中查找未链接的网址，
将它们转换为超链接'

• 增加字体大小以使文字更清晰可辨


• 查找并处理DOM中的微格式数据
>

但是，内容脚本有一些
限制。它们不能：
$ b

• 使用chrome。* API（除chrome.extension的部分外）


• 使用由其扩展页面定义的变量或函数
  
• 使用由网页或其他内容定义的变量或函数
  脚本


• 交叉-site XMLHttpRequests

现在要做你想做的事，你需要得到一个链接，你有有两种选择：

1. 使用消息来重定向页面。


2. 在iframe中调用parent进行重定向。
   
   

   消息传递方式
   
   

   消息传递非常简单，只需向 chrome.tabs.create 新页面。

   
   
   

   contentscript.js

     chrome.extension.sendRequest（{visit：http://yahoo.fr}）; 
     

   background.html

     chrome.extension.onRequest.addListener（function（request，sender，sendResponse）{
    if（request.visit）{
    chrome.tabs.create （{url：request.visit}）; 
   } 
    sendRepsonse（{}）; // Snub 
   }）; 
     

   
   
   

   父级方法

   
   
   

   内容脚本注入：
   
   

    < iframe src ='iframe.html'>< / iframe> 
   < script type =text / javascript> 
   函数changeURL（url）{
    document.location = url; 
   } 
   < / script> 
     

   IFrame包含：

    < a href =javascript：parent.changeURL（'http://yahoo.fr'）;>更改为Yahoo< / a> 
     

   
   

   I'm currently have some issue with an iframe...

   I have my iframe with a searchbox and i want to make this searchbox redirection when i click on go by creating a new tab/window

   http://img51.imageshack.us/i/issuec.png/

   So to be clear, my google chrome extension call as a content script : overlay.js Then this one will put at the end of the current page my "overlay.html" page.

   So the problem come from that my .html is represented as a iframe and i don't see how i can redirect from this iframe.

   overlay.html

   <form id="searchForm" action="#" onsubmit="searchBoxRedirection(this)" method="post">
   <img id="logo" src="images/extension.png" alt="Logo"></img>
   <input type="search" value="" name="searching">
   <input type="submit" value="Go !" /> 
   </form>
   

   overlay.js

   var overlay= {
       init: function() {
           this.injectoverlay();
           //alert('Initialisation reussie');
       },
   
       injectoverlay: function() {
           var body = $('body'),
               overlayURL = chrome.extension.getURL("overlay.html"),
               iframe = $('<iframe id="YouroverlayFrame" src="'+overlayURL+'">');
   
               body.append(iframe);
               iframe.show();
   
           //alert('Injection reussie');
       }
   }
   

   Tool.js

   function searchBoxRedirection(form)
   {
       tabs.create({url:"www.yahoo.fr"});
   }
   

   manifest.json

   {   
   
       "background_page" : "background.html",
       "browser_action" :
       {
           "default_icon" : "images/Extension.png"
       },
       "content_scripts": 
       [ {
         "all_frames": true,
         "css": ["css/overlay.css"],
         "js": ["js/overlay.js"],
         "matches": ["http://*/*"],
         "run_at": "document_start"
       } ], 
       "permissions" : ["tabs", "unlimitedStorage", "http://*/*"], 
       "name" : "MyOverlay",
       "version" : "1.1",
       "description" : "Sindar Overlay"
   }
   

   解决方案

   Since your using Content-Scripts you cannot call any Chrome API except a few chrome.extensions.*

   Here are some examples of what content scripts can do:

   Documentation Quote

   Find unlinked URLs in web pages and convert them into hyperlinks'

   • Increase the font size to make text more legible
   • Find and process microformat data in the DOM

   However, content scripts have some limitations. They cannot:

   • Use chrome.* APIs (except for parts of chrome.extension)
   • Use variables or functions defined by their extension's pages
   • Use variables or functions defined by web pages or by other content scripts
   • Make cross-site XMLHttpRequests

   Now to do what you want, you need to goto a link, you have two choices:

   1. Use Messaging to redirect the page.
   2. Call "parent" within the iframe to do a redirect.

   Messaging approach

   Messaging is simple, all you do is send a request to the extension which will chrome.tabs.create the new page.

   contentscript.js

   chrome.extension.sendRequest({visit: "http://yahoo.fr"});
   

   background.html

   chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
     if (request.visit) {
       chrome.tabs.create({url: request.visit});
     }
     sendRepsonse({}); // Snub
   });
   

   Parent approach

   Content Script injects:

   <iframe src='iframe.html'></iframe>
   <script type="text/javascript">
      function changeURL(url) {
    document.location=url;
      }        
   </script>
   

   IFrame contains:

    <a href="javascript:parent.changeURL('http://yahoo.fr');">Change to Yahoo</a>
   

   这篇关于从Iframe创建一个新的chrome选项卡/窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！