iframe - Chrome 扩展 : create tab from within an iframe in popup

转载作者：行者123 更新时间：2023-12-01 14:24:28

24

4

在我的弹出页面中，我有一个 iframe 标签，其中有一个按钮。单击此按钮时，将调用包含在 iframe 脚本中的函数。此函数包含对 chrome.tabs.create({ url: "..."}); 的调用，但我不断收到 “Uncaught TypeError: Cannot call method 'create' of undefined ". 我想原因是我在 iframe 中，而不是在弹出页面本身中。

有没有办法克服这个问题并从 iframe 中创建一个新标签？

编辑

这是我的代码。

弹出页面的iframe加载如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="style/frame_style.css" media="screen" />
  <script src='jquery-1.8.3.js'></script>
  <script src='scripts/frame_functions.js'></script>
</head>

<body>
  <div>
    <button value="Click to open Google in a new tab" class='new_tab_bt'></button>
  </div>
</body>
</html>

frame_functions.js:

$(document).on("click", '.new_tab_bt', function(){
  openNewTab(); 
});

function openNewTab()
{
chrome.tabs.create({ url: "https://www.google.com" });
}

最佳答案

您的代码无需任何更改即可工作，我添加了工作代码作为引用； iframe 的目标源 html 页面在哪里，您是如何从浏览器操作弹出窗口中引用它的？如果这没有解决共享问题，您是如何从浏览器操作弹出窗口中引用您的 iframe 的。

工作版本

list .json

简单代码，注册浏览器操作。

{
    "name": "Iframe Holder",
    "description": "http://stackoverflow.com/questions/14429598/chrome-extension-create-tab-from-within-an-iframe-in-popup",
    "version": "1",
    "manifest_version": 2,
    "browser_action": {
        "default_popup": "popup.html",
        "default_title": "Iframe."
    }
}

popup.html

在浏览器操作的 popup 中包含目标页面。

<html>

    <body>
        <iframe width="300" height="300" src="iframe.html"></iframe>
    </body>

</html>

iframe.html

使用了您的代码并删除了不相关的 css 文件等

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src='jquery.js'></script>
        <script src='iframe.js'></script>
    </head>

    <body>
        <div>
            <button value="Click to open Google in a new tab" class='new_tab_bt'></button>
        </div>
    </body>

</html>

iframe.js

未经修改使用您的代码

$(document).on("click", '.new_tab_bt', function () {
    openNewTab();
});

function openNewTab() {
    chrome.tabs.create({
        url: "https://www.google.com"
    });
}

关于iframe - Chrome 扩展 : create tab from within an iframe in popup，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14429598/

24

4

0

文章推荐： java Makefile 不起作用

文章推荐： java - 国际化网络服务

文章推荐： java - 如何拥有动态方法参数

文章推荐： java - 单击图像时播放声音

tabs - 有没有办法垂直堆叠 `Tabs`？
我在看 Tabs UI 的选项。默认行为是它们水平堆叠。有没有办法改变它？我想堆叠Tabs垂直。它将节省大量的 UI“不动产”，尤其是在移动应用程序 UI 中。最佳答案尝试这个: Tabs ta
tabs - 无法在 Zsh 中将向后 TAB 作为 Shift-TAB
问题:在 Zsh 中使用 TAB 向后导航，类似于在 Firefox 中 Shift-TAB Shift-TAB 应该执行的操作示例我在终端中运行以下代码 ls 我明白了 A B C D E F
tab-completion - 将 tab 完成键绑定(bind)更改为 MC 中的 tab
有很多人想知道如何完成制表符。这不是这些问题之一。问题是如何将 tab 键分配给 tab 补全？ alt-tab/esc-tab 很痛苦。在面板禁用模式选项卡完成工作，这让我暂时...但我仍然希望面板
react-native - createBottomTabNavigator : how do I reload/refresh a tab screen on tab on the tab-icon?
所以我有一个带有 3 个屏幕的 TabNavigator。 import React from 'react'; import {TabNavigator,createBottomTabNavigat
tabs - 如何在文本框中按 Tab 键后触发事件
我想触发一个事件，例如当我在文本框中按 Tab 键时显示警报消息。 $("input").blur(function (e) { if (e.which == 9) alert(
javascript - $( "#tabs").tabs();不是函数
我将这段代码设置为创建一个选项卡式菜单，它显示为一个选项卡式菜单，但当我加载网站时，选项卡在单击时不会改变。在“检查元素”中它说 $( "#tabs").tabs();不是函数。我不知道下一步要解决这
javascript - 当您按 Tab 时，它应该 Tab 到下一个空白文本输入框 JavaScript，而不使用 Tab 索引
表单中有多个输入字段的示例，因为有一些字段在此之前会自动填充，如果我按 Tab 键，那么它应该跳过该自动填充的输入字段并应转到空白输入字段我尝试过，但是当我开始在空白输入中写入时会发生什么，它也会自
google-chrome - chrome.tabs 问题与 chrome.tabs.update 和 chrome.tabs.executeScript
我想写一个小的 chrome 扩展程序，它应该从网页 A(当前网页)获取信息，将选项卡更新到网页 B，然后将代码注入(inject)网页 B。不幸的是，以下代码正在将网页更新到 B 但注入(injec
Angular Material 选项卡 : Prevent tab change of mat-tab-group if the form in current tab is dirty
如果当前事件选项卡中的表单很脏，我试图阻止 mat-tab 的选项卡更改。但是我找不到拦截选项卡更改事件的方法。 // Tab 0 Content // Tab
terminal - iterm2 问题 : create new tab with same path of previous current tab BUT 2 tabs are clones and not indepedent
我已从 MacOS Mojave 上的默认终端切换到 iterm2 .我有一个关于从当前选项卡打开新选项卡的问题。确实，我希望与上一个当前选项卡处于同一路径。为此，我执行了经典程序，即转到 ite
jquery-ui-tabs - $(...).tabs 不是函数
我在我的网站的两页上有此代码，但在一页上该功能不起作用。 Firebug 向我显示“$(...).tabs 不是函数”。我不明白为什么，谁能告诉我什么是错的？这是有效的: http://www.in
tabs - 如何在 CMD 中创建 %tab%
我需要可靠的方法来为 Windows 和 XP 创建 %tab% (包含一个制表符)。 SET TAB=" " 应该适用于 Windows 7(未测试)但不适用于 Win XP(已测试)。这个 fo
RMarkdown 似乎无法在 Tabs 中生成 Tabs
我正在尝试使用 RMarkdown 制作静态网页。我想定义一个 UI，它有第一层选项卡，然后是第一层下面的选项卡。我已经在 RMarkdown: Tabbed and Untabbed heading
RMarkdown 似乎无法在 Tabs 中生成 Tabs
我正在尝试使用 RMarkdown 制作静态网页。我想定义一个 UI，它有第一层选项卡，然后是第一层下面的选项卡。我已经在 RMarkdown: Tabbed and Untabbed heading
tabs - 通过 chrome.tabs.create 打开多个选项卡时出现问题
我在使用 chrome.tabs.create 方法打开多个选项卡时遇到问题。我正在尝试使用 chrome.tabs.create 循环打开大约 9 个选项卡，但打开的选项卡数量仅限于 4 个。看起来
tabs - 如何自定义 Material UI Tabs 指示器的宽度和位置
我正在使用 Material ui 的标签，并且能够对标签的指示器进行更改。但是，我正在尝试使用样式将每个选项卡的指示器宽度减小到某个固定宽度。但似乎指标以一些计算值定位在左侧，并且给它一个宽度不会使
macos - v. Emacs 中的 TAB
我在 OS X 终端中使用 emacs 24.3，并且遇到了一些奇怪的事情。在 markdown-mode.el 中，tab 键通过 (define-key map (kbd "") 'markdo
tabs - 错误 : There is no clipping info for given tab
在 Chrome 开发者工具上 Uncaught (in promise) Error: There is no clipping info for given tab at E._handleRes
vim - 如何为:tab new，:tab，:tab设置快捷方式？
在vim中，我想将:tabnew缩短为:tn，将:tabp缩短为:th，将:tabn缩短为:tl在我的.vimrc中。知道我将如何重新映射这样的命令吗？最佳答案使用cabbrev： ca tn t
tabs - TabIndex - 点击选项卡将我移动到地址栏 - 无法使用焦点或 +tab 索引解决此问题
我读过几个主题，讨论 IE 中的地址栏在使用 TAB 时基本上是第一个获得焦点的主题(MSDN 自己的文档讨论了这一点)。然而，我也见过一些情况，但情况并不总是如此...... 我有一个母版页，内容

首页

博学

6Ren·AI