【问题标题】：Create a new chrome tab/window from a Iframe从 iframe 创建一个新的 chrome 选项卡/窗口
【发布时间】：2011-07-04 04:33:18
【问题描述】：

我目前对 iframe 有一些问题...

我有一个带有搜索框的 iframe，我想在单击 go 时通过创建一个新选项卡/窗口来重定向这个搜索框

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

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

所以问题来自我的 .html 被表示为 iframe，我看不到如何从这个 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');
    }
}

工具.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"
}

【问题讨论】：

标签： javascript iframe google-chrome google-chrome-extension

【解决方案1】：

由于您使用Content-Scripts，因此您无法调用任何 Chrome API，除了一些 chrome.extensions。*

以下是内容脚本可以执行的一些示例：

文档报价

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

增加字体大小以使文本更清晰

在 DOM 中查找和处理微格式数据

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

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

使用由其扩展页面定义的变量或函数

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

制作跨站 XMLHttpRequests

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

使用Messaging 重定向页面。
在 iframe 中调用“父级”进行重定向。

消息传递方法

消息传递很简单，您只需向扩展程序发送请求，该扩展程序将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">
   function changeURL(url) {
 document.location=url;
   }        
</script>

IFrame 包含：

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

【讨论】：

【解决方案2】：

我正在尝试同样的事情，但不幸的是不知道将下面的代码放在哪里

父方法

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>

【讨论】：