嵌套 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 的相关文章

  • 在 Wordpress 站点中进行 AJAX 调用时出现问题

    我在使用 Wordpress 站点功能的 AJAX 部分时遇到了一些问题 该功能接受在表单上输入的邮政编码 使用 PHP 函数来查找邮政编码是否引用特定位置并返回到该位置的永久链接 我的第一个问题是关于我构建的表单 现在我的表单操作是空白的
  • Google App Engine:修改云运行环境

    我正在尝试部署一个使用自定义 Node js 服务器的 Next js 应用程序 我想将自定义构建变量注入应用程序 next config js const NODE ENV process env NODE ENV const envTy
  • 文件上传控件 OnChange 事件 JQuery

    我正在尝试使用 AJAX JQUERY 和 Net HTTPHandler 构建页面来上传文件 如下所示http dotnet dzone com news async file upload jquery and http dotnet
  • JavaScript 重定向到新窗口

    我有以下代码 它根据下拉列表的值重定向到页面 我如何使其在新窗口中打开 function goto form var index form select selectedIndex if form select options index
  • 如何以编程方式处理 JqGrid 事件?

    我正在使用JqG rid 的 ASP NET 包装器 http www trirand net demoaspnet aspx 我想以编程方式连接一些网格的处理程序events http www trirand com jqgridwiki
  • Jquery/Javascript 上传和下载文件,无需后端

    是否可以在没有后端服务器的情况下在 JavaScript 函数中下载和上传文件 我需要导出和导入由 JavaScript 函数生成的 XML 我想创建按钮 保存 xml 来保存文件 但我不知道是否可行 另一方面 我希望将 XML 文件直接上
  • jQuery Mobile 表单验证

    我有一个移动网站 除了验证之外一切都工作正常 基本上我希望从用户那里获取值 然后在单独的页面 process php 上处理它们 但是 在这样做之前 我需要检查以确保字段已填充 我已经研究了几种方法来做到这一点 但似乎没有一种有效 我现在有
  • 表单计算器脚本基本价格未加载 OnLoad

    我的表单中有一个计算器来计算我的下拉选项选择 function select calculate on change calc input type checkbox calculate on click calc function cal
  • Iframe 相对路径挑战

    我有一个页面 在页面内有一个 Iframe 目录如下 Folder1 Folder2 IframeCSS IframeCSS Css iframePage1 html stuff css parentPage1 html 在 iframeP
  • 如何使输入字段和提交按钮变灰

    我想变灰这两件事 http doorsplit heroku com 歌曲输入字段和提交按钮 直到用户输入艺术家 有没有一种简单的方法可以通过 JQuery 来做到这一点 艺术家输入字段的id是 request artist 你可以这样做
  • Firefox 书签探索未超过 Javascript 的第一级

    我已经编写了一些代码来探索我的 Firefox 书签 但我只获得了第一级书签 即我没有获得文件夹中的链接 e g 搜索引擎 雅虎网站 谷歌网站 在此示例中 我只能访问 Search engines 和 google com 不能访问 yah
  • Electron - 为什么在关闭事件时将 BrowserWindow 实例设置为 null

    The 电子文档 https electronjs org docs api browser window 提供以下代码示例来创建新窗口 const BrowserWindow require electron let win new Br
  • 为什么在 Internet Explorer 中访问 localStorage 对象会引发错误?

    我正在解决一个客户端问题 Modernizr 意外地没有检测到对localStorageInternet Explorer 9 中的对象 我的页面正确使用 HTML 5 文档类型 并且开发人员工具报告该页面具有 IE9 的浏览器模式和 IE
  • 我可以使用 jQuery 打开下拉列表吗

    对于 HTML 中的下拉列表
  • 如何在类似控制台的环境中运行 JavaScript?

    我正在尝试遵循这里的示例 http eloquentjavascript net chapter2 html http eloquentjavascript net chapter2 html and print blah 在浏览器中运行时
  • 在 React.js 中编辑丰富的数据结构

    我正在尝试为数据结构创建一个简单的基于网格的编辑器 但我在使用 React js 时遇到了一些概念问题 他们的文档对此没有太大帮助 所以我希望这里有人可以提供帮助 首先 将状态从外部组件传输到内部组件的正确方法是什么 是否有可能将内部组件中
  • Javascript/Jquery:确定用户是否使用鼠标滚轮、滚动条或键盘滚动

    我正在尝试让用户界面正常工作 如果他们使用鼠标滚轮 我需要让它以一种方式滚动 如果他们使用滚动条 我需要让它以另一种方式滚动 如果他们使用键盘 我需要让它以另一种方式滚动 我相信滚轮和滚动条都充当鼠标事件 但是当单击滚动条时我无法让 jav
  • Spring Rest 和 Jsonp

    我正在尝试让我的 Spring Rest 控制器返回jsonp但我没有快乐 如果我想返回 json 但我有返回的要求 完全相同的代码可以正常工作jsonp我添加了一个转换器 我在网上找到了用于执行 jsonp 转换的源代码 我正在使用 Sp
  • fullCalendar 未显示正确的结束日期

    我正在看调试页面 http jsbin com wukofacaxu edit js outputFullCalendar 官方网站的 我想安排一个活动时间为 22 09 2015 至 30 09 2015 dd mm yyyy 但它只显示
  • 如何从图像输入中获取 xy 坐标?

    我有一个输入设置为图像类型

随机推荐

  • 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 中的元