嵌套 iframe,又名 Iframe Inception

2024-02-09

我正在尝试使用 jQuery 访问 div id="element"。

<body>
    <iframe id="uploads">
        <iframe>
            <div id="element">...</div>
        </iframe>
    </iframe>
</body>

所有 iframe 都位于同一域中,不存在 www/非 www 问题。

我已成功选择第一个 iframe 中的元素,但未成功选择第二个嵌套 iframe 中的元素。

我尝试了一些事情,这是最近的一次(也是一次非常绝望的尝试)。

var iframe = jQuery('#upload').contents();
var iframeInner = jQuery(iframe).find('iframe').contents();
var iframeContent = jQuery(iframeInner).contents().find('#element');

// iframeContent is null

编辑: 为了排除计时问题,我使用了单击事件并等待了一段时间。

jQuery().click(function(){
   var iframe = jQuery('#upload').contents().find('iframe');
   console.log(iframe.find('#element')); // [] null
});

有任何想法吗? 谢谢。

更新: 我可以像这样选择第二个 iframe...

var iframe = jQuery('#upload').contents().find('iframe');

现在的问题似乎是 src 是空的,因为 iframe 是用 javascript 生成的。 因此选择了 iframe 但内容长度为 0。


问题是,您提供的代码将不起作用,因为<iframe>元素必须具有“src”属性,例如:

<iframe id="uploads" src="http://domain/page.html"></iframe>

用起来没问题.contents()获取内容:

$('#uploads).contents()将使您可以访问第二个 iframe,但如果该 iframe 位于“内部”http://domain/page.html记录加载的#uploads iframe。

为了测试我的说法是否正确,我创建了 3 个名为 main.html、iframe.html 和 noframe.html 的 html 文件,然后选择了 div#element:

$('#uploads').contents().find('iframe').contents().find('#element');

由于您需要等待 iframe 加载资源,因此该元素将存在一段时间不可用。此外,所有 iframe 必须位于同一域中。

希望这可以帮助 ...

这是我使用的 3 个文件的 html(将“src”属性替换为您的域名和 url):

主要.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>main.html example</title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <script>
        $(function () {
            console.log( $('#uploads').contents().find('iframe').contents().find('#element') ); // nothing at first

            setTimeout( function () {
                console.log( $('#uploads').contents().find('iframe').contents().find('#element') ); // wait and you'll have it
            }, 2000 );

        });
    </script>
</head>
<body>
    <iframe id="uploads" src="http://192.168.1.70/test/iframe.html"></iframe>
</body>

iframe.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>iframe.html example</title>
</head>
<body>
    <iframe src="http://192.168.1.70/test/noframe.html"></iframe>
</body>

无框架.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>noframe.html example</title>
</head>
<body>
    <div id="element">some content</div>
</body>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

嵌套 iframe,又名 Iframe Inception 的相关文章

  • Visual Studio 改变 Ctrl-K-D 的工作方式

    In Visual Studio I m using 2012 is there any way of editing the way that Ctrl K D combinations handles its Auto Formatti
  • WooCommerce 自定义产品类型选项不隐藏自定义产品选项卡

    我刚刚向我的 WC 管理产品页面添加了自定义产品类型选项 add filter product type options this filter product type options 99 1 public function filte
  • 如何在 jQuery 中将标题转换为 URL slug?

    我正在 CodeIgniter 中开发一个应用程序 我试图在表单上创建一个字段来动态生成URL slug 我想做的是删除标点符号 将其转换为小写 然后用连字符替换空格 例如 Shane s Rib Shack 将变成 shanes rib
  • 从对象中取出具有无效(NaN、空白等)值的键的最佳方法?

    我有一个供用户填写的简短搜索表单 将有多个搜索查询进入 MongoDB 该表单创建一个名为的变量searchParams可能看起来像这样 var searchParams city Springfield bedrooms 3 bathro
  • Pjax动画

    我终于让 pjax 工作了 但我还有另一个问题 如何添加一些 jquery 动画 如淡出 幻灯片旧内容和淡入 幻灯片新内容 默认情况下 pjax 只是更改内容 没有任何好看的效果 任何帮助将非常感激 此致 基本上 你有一堆事件 https
  • fadeOut() 和slideUp() 同时进行?

    我已经发现jQuery 淡出然后滑动 https stackoverflow com questions 734554 jquery fadeout then slideup这很好 但不是那个 我怎么能够fadeOut and slideU
  • 转义 \u200b(零宽度空格)和其他非法 JavaScript 字符

    我有一组 JavaScript 对象 我引导到后端模板 以在页面加载时初始化我的 Backbone js 集合 它看起来像这样 作为 Twig 模板 我遇到的问题是某些文本字段包含 u200b 零宽度空格 这会破坏
  • 修改 Twitter 帖子上可编辑 Div 的内容

    我正在编写一个 chrome 扩展 它可以帮助用户在 Twitter 上输入内容 当在 twitter 上写推文时 twitter 会打开一个可编辑的 div 容器 当用户输入内容时 twitter 大概正在使用某些网络框架 会生成子 di
  • 冒泡可用于图像加载事件吗?

    我可以用吗 window addEventListner 某种程度上来说 我所有的图像都有一个display none 图像加载后 我想设置display inline 这样我就可以规范下载图像时显示的内容 在这种情况下 我无法预加载图像
  • 非法使用break语句; javascript

    当这个变量达到一定数量时 我希望循环停止 但我不断收到错误 未捕获的语法错误 非法的中断语句 function loop if isPlaying jet1 draw drawAllEnemies requestAnimFrame loop
  • Next.js:错误:React.Children.only 期望接收单个 React 元素子元素

    我有一个名为Nav inside components目录及其代码如下所示 import Link from next link const Nav gt return div a Home a a About a div export d
  • Aurelia 中的角度服务?

    我还没有找到详细说明如何从 Angular 1 x 迁移到 Aurelia 的详细文档 到目前为止 我只看到人们详细介绍了 Angular 的概念directive可以在 Aurelia 中使用重制 customElement 好吧 足够简
  • 引用自身的 Javascript 对象...有问题吗?

    由于 Javascript 允许通过引用分配复合值 因此如果 Javascript 对象引用自身 它将创建无限的引用集 如控制台中所示 这看起来像是某种无限循环 但 Chrome 似乎没有问题 这样做是否存在任何内存问题或其他风险 就记忆力
  • 使用jquery调用AS3外部接口

    我正在使用ExternalInterface 调用嵌入在html 页面中的Flash 应用程序 以下代码工作正常 我正在使用按钮进行测试 document ready function button click function var a
  • 在 Nodejs 中,如何停止 FOR 循环直到 MongoDB 调用返回

    我正在研究下面的代码片段 我有一个名为 stuObjList 的 JSON 对象数组 我想循环遍历数组以查找具有特定标志集的特定 JSON 对象 然后进行数据库调用以检索更多数据 当然 FOR 循环不会等待数据库调用返回并到达 j leng
  • 在javascript中创建图像的缩略图方块(不丢失纵横比)

    我正在制作一个客户端拖放文件上传脚本作为书签 在上传之前 我使用 File API 将图像读取为 base64 格式并将其显示为缩略图 This is how my thumbnails look like I want them to l
  • 在 React Web 应用程序中使用 createjs-soundjs

    我想用https www npmjs com package createjs soundjs https www npmjs com package createjs soundjs在 React Web 应用程序上播放声音 我正常安装了
  • 如果选中复选框则显示 div

    我正在尝试构建类似 WordPress 选项的东西 用于在创建文章时切换字段可见性 我所构建的依赖于 click函数使用相应的字段名称切换父项 我想知道如果选中该复选框 执行此操作的最佳方法是什么 因为如果您选中一个框并重新加载页面 因为它
  • Jquery 以编程方式更改

    文本

    编辑 解决方案是将其添加到个人资料页面而不是性别页面 profile live pageinit function event p pTest text localStorage getItem gender 我在列表视图中有一个带有一些文
  • 为什么 try catch 块没有捕获 Promise 异常?

    我对承诺的错误处理感到困惑 答案可能很明显 但我不明白 我有以下示例代码 var test async function throw new Error Just another error try test then catch err

随机推荐

  • JavaScript 是否有未定义的行为?

    JavaScript 是否具有未定义的行为 类似于 C 或者它是否完全由规范明确定义并且是确定性的 请注意 我放弃了实现错误和规范差异 我也在丢弃类似的东西Math random and Date now 是否有一段 JavaScript
  • 在 Xcode 5 中将 iPhone NIB 转换为 iPad NIB

    我正在开发一个通用应用程序 嗯 有这个 将 iPhone xib 转换为 iPad xib https stackoverflow com questions 2488280 converting iphone xib to ipad xi
  • 获取 DOM 元素的图像数据

    是否可以 通过标准 JS 或某些浏览器扩展 获取 DOM 元素的图像数据 我正在考虑这样的用法 创建一个离屏 DOM 元素 动态地用一些 CSS 样式的内容填充它 获取其图像数据 use the image data somehow 作为背
  • 如何结合单索引和多索引 Pandas DataFrame

    我正在尝试连接多个 Pandas DataFrame 其中一些使用多索引 另一些使用单个索引 作为示例 让我们考虑以下单索引数据帧 gt import pandas as pd gt df1 pd DataFrame single 10 1
  • Mysql即使id错误也返回结果

    我在 id 值之后添加随机字符串时遇到问题仍然查询返回结果 理想情况下 它应该返回空结果 mysql gt select from pricelists where id 1abcd id name mark
  • 使用 Jest/Typescript 测试 fs 库函数

    我正在尝试测试我编写的库函数 它在我的代码中工作 但无法使用 fs 的模拟进行测试 我有一系列函数用于处理封装在函数中的操作系统 因此应用程序的不同部分可以使用相同的调用 我曾尝试遵循这个问题 https stackoverflow com
  • Ruby:意外的输入结束,需要 if 语句的 keywords_end

    我使用 Java 工作了几个月 现在正在转回 Ruby 我从以下代码中收到一个奇怪的错误 def count divisors divisor hash 25 times do i divisor hash i find dividends
  • << 目标 c 枚举中的运算符?

    我正在寻找一些东西并进入这个枚举是apple UITableViewCell h 如果这是微不足道的 我很抱歉 但我想知道 好奇这有什么意义 我知道 ruby 中的 enum UITableViewCellStateDefaultMask
  • 使用 javascript/jquery 用 html 填充 div

    这是我的问题 我有一个div div div 我想在某些条件下用其他代码填充它 p Showing results Key img src lt 1 nbsp img src lt 2 nbsp img src lt 3 nbsp img
  • FTP 脚本在放置后保留文件的时间戳

    我知道 FTP 不支持传输和保留文件日期 时间戳 想知道是否有人有任何想法 脚本 Shell perl 可以在放置操作后保留传输文件的时间戳 您是否可以尝试以 tar 文件传输文件 从 tar 中提取后 时间戳将被恢复
  • 处理器“org.thymeleaf.spring5.processor.SpringInputGeneralFieldTagProcessor”执行期间出错

    我正在尝试使用 thymeleaf 和 Spring boot 构建简单的搜索选项卡 这是我的代码和 html 文件 scCountry html
  • React Native (expo) 加载 Markdown 文件

    我在加载 Markdown 文件时遇到一些问题 md 进入我的本机反应 非独立的世博项目 找到了这个很棒的包 可以让我渲染它 但不知道如何加载本地 md文件作为字符串 import react from react import PureC
  • 如何阻止特定网站浏览器代理?

    最近 我遇到了数据挖掘机器人的一些问题 每天在一天中的某些时间从我的网站提取数据 这不仅会浪费我的带宽 还会向我的谷歌分析提供错误的数据 他们通常使用 amazonaws IP 进入 但最近他们已切换到其他主机 保持不变的是它们使用相同的用
  • 使用 jFreeChart 绘制磁滞回线

    我需要绘制磁滞环 然后计算环内闭合的面积 我正在使用 jFreeChart 考虑以下数据 hyst 0 0 hyst 1 0 hyst 2 0 0098 hyst 3 0 0196 hyst 4 0 0489 hyst 5 0 0879 h
  • Eclipse:“重构 - 重命名”完全混乱,替换文件中的任意字符

    在重构类名时 Eclipse 最近表现出非常奇怪的行为 例如 让我们看一下我们的一个课程 public class CampaignCSVPanel extends ContentPanel private FileUploadField
  • 如何向现有对象方法添加装饰器?

    如果我使用我无法控制的模块 类 我将如何装饰其中一个方法 我明白我可以 my decorate method target method 但我希望这种情况发生在任何地方target method无需执行搜索 替换即可调用 有可能吗 不要这样
  • Python DataFrame打印样式随机变化

    我正在使用 python 3 7 7 和 Visual Studio 代码 1 58 2 我正在使用 pyodbc 查询 mysql 数据库 但我相信我看到的问题发生在这之外 import pyodbc as po import panda
  • 如何删除领域对象及其子关系?

    我有一个大对象 它与其他对象有很多关系 这些对象也与其他对象有关系 因此 当我删除根对象时 我发现只有父对象被删除 而其所有关系都没有被删除 有没有办法在同一事务中删除整个树 领域不支持cascading delete目前 您可以为该功能投
  • 锁定(“Kiosk 模式”)Android 设备 [关闭]

    Closed 这个问题是无关 help closed questions 目前不接受答案 在满足以下要求的同时 您将如何锁定 Android 设备 访问 Wifi 网络 访问单个公司的应用程序 能够下载 更新到公司应用程序的新版本 访问蓝牙
  • 嵌套 iframe,又名 Iframe Inception

    我正在尝试使用 jQuery 访问 div id element div div 所有 iframe 都位于同一域中 不存在 www 非 www 问题 我已成功选择第一个 iframe 中的元素 但未成功选择第二个嵌套 iframe 中的元