首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何通过jQuery/Javascript检测iframe中的视频时长

通过jQuery/Javascript检测iframe中的视频时长,可以使用以下步骤:

  1. 首先,通过jQuery选择器或原生JavaScript获取到包含视频的iframe元素。例如,可以使用$("#iframeId")document.getElementById("iframeId")来获取iframe元素。
  2. 接下来,使用contentWindow属性获取到iframe的内容窗口对象。例如,可以使用$("#iframeId").contentWindowdocument.getElementById("iframeId").contentWindow来获取内容窗口对象。
  3. 然后,通过内容窗口对象的document属性获取到iframe中的文档对象。例如,可以使用$("#iframeId").contentWindow.documentdocument.getElementById("iframeId").contentWindow.document来获取文档对象。
  4. 使用文档对象的相关方法或属性来获取视频元素。具体方法取决于视频元素在iframe中的结构和属性。例如,可以使用getElementsByTagName方法获取所有的<video>元素,或者使用querySelector方法获取指定的视频元素。
  5. 一旦获取到视频元素,就可以使用其duration属性来获取视频的时长。例如,可以使用videoElement.duration来获取视频的时长,单位为秒。

下面是一个示例代码:

代码语言:javascript
复制
// 使用jQuery选择器获取iframe元素
var iframe = $("#iframeId");

// 获取内容窗口对象
var contentWindow = iframe[0].contentWindow;

// 获取文档对象
var doc = contentWindow.document;

// 获取视频元素
var videoElement = doc.getElementsByTagName("video")[0];

// 获取视频时长
var duration = videoElement.duration;

// 打印视频时长
console.log("视频时长:" + duration + "秒");

请注意,以上代码仅适用于在同域的情况下。如果iframe中的内容来自不同的域,由于浏览器的安全策略限制,将无法直接访问iframe中的内容。在这种情况下,需要使用跨域通信技术,如postMessage来实现与iframe中的内容进行通信。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JS异步加载三种方式

前者是在document已经解析完成,页面dom元素可用,但是页面图片,视频,音频等资源未加载完,作用同jQueryready事件;后者区别在于页面所有资源全部加载完毕。...XHR Injection(XHR 注入):通过XMLHttpRequest来获取javascript,然后创建一个script元素插入到DOM结构。...元素,然后再iframe执行加载JS操作。...原理基本上都是向DOM写入script或者通过eval函数执行JS代码,你可以把它放在匿名函数执行,也可以在onload执行,也可以通过XHR注入实现,也可以创建一个iframe元素,然后在iframe...JS延迟加载机制(LazyLoad):简单来说,就是在浏览器滚动到某个位置在触发相关函数,实现页面元素加载或者某些动作执行。如何实现浏览器滚动位置检测呢?

3.1K20
  • 这11个有趣 CSS 和 JavaScript 库太实用了!

    BigPicture BigPicture 是一款轻量级且独立于框架 JavaScript 图像/视频查看器插件。...可以使用标签以及背景图像,支持 Youtube、Vimeo、直接视频链接、 任何 iframe以及 音频文件。 地址:https://henrygd.me/bigpicture/ 2....FitVids.js FitVids.js是一个轻量级jQuery响应式视频插件,他可以实现流体视频嵌入。FitVids.js应用了内在比例算法,在你响应网页上实现视频流体宽度。...Anchorme 小巧、快速、高效、功能丰富 Javascript 库,用于检测文本链接/URL/电子邮件并将它们转换为可点击 HTML 链接。...Moveto MoveTo 是一个 JavaScript 库,用于在单击按钮时创建滚动动画。有趣是,这个库在使用 gzip 压缩时只有 1kg,并且不依赖于 jQuery 或其他任何东西。

    1.4K40

    跨域详解 【原创】

    (跨域访问接口地址) 服务器端对于CORS支持通过设置 Access-Control-Allow-Origin ,如果浏览器检测到相应设置,则允许Ajax跨域访问 3. jsonp跨域 3.1...> 最终,输出结果为:dosomething(['a','b','c']); 3.3 jQuery封装操作 $.getJSON('...缺点:只支持GET请求,不支持POST等其它类型HTTP请求;只支持跨域HTTP请求这种情况,不能解决不同域两个页面之间如何进行JavaScript调用问题。...通过修改document.domain来跨子域 浏览器同源策略限制之一是不能通过ajax方法去请求不同源文档。第二个限制是浏览器不同域框架之间不能进行js交互操作。...框架不同域,所以无法通过在页面书写js代码来获取iframe数据: function test(){ var

    1.4K50

    XSS平台模块拓展 | 内附42个js脚本源码

    17.浏览器指纹 基于计算机显示器图像呈现功能,为注入浏览器生成独特指纹。对于定位特定用户或设备非常有用… 18.iFrame CSRF令牌盗窃 通过嵌套iFrames窃取CSRF令牌。...第一个iFrame获取CSRF保护页面,在第一个表单“token”参数窃取标记值,并创建第二个iFrame,并与相应标记进行连接。...一个基本脚本,它使用Javascript“form”对象“onsubmit”属性来拦截和使用表单设置值。另一种是从自动完成窃取密码并将数据提交给恶意网址。...34.FlashHTTPRequest 一个简单Flash桥接器,用于通过JavaScript执行Flash HTTP请求。...39.jQuery钓鱼 一个脚本,可以通过网络钓鱼连接并劫持所有表单。 40.振动 关于如何在Android手机上使用振动API以及可以完成一些恶意用法例子。

    12.5K80

    跨域详解

    (跨域访问接口地址) 服务器端对于CORS支持通过设置 Access-Control-Allow-Origin ,如果浏览器检测到相应设置,则允许Ajax跨域访问 3. jsonp跨域 3.1...> 最终,输出结果为:dosomething(['a','b','c']); 3.3 jQuery封装操作 $.getJSON('...缺点:只支持GET请求,不支持POST等其它类型HTTP请求;只支持跨域HTTP请求这种情况,不能解决不同域两个页面之间如何进行JavaScript调用问题。...通过修改document.domain来跨子域 浏览器同源策略限制之一是不能通过ajax方法去请求不同源文档。第二个限制是浏览器不同域框架之间不能进行js交互操作。...框架不同域,所以无法通过在页面书写js代码来获取iframe数据: function test(){ var

    1.3K70

    Fancybox图片灯箱效果实现

    Fancybox是一款基于jquery开发类Lightbox插件,同时也是一款很绚丽 jquery 弹出层展示插件,支持对放大图片添加阴影效果,对于一组相关图片添加导航操作按纽。...该lightbox除了能够展示图片之外,还可以展示iframed内容, 通过css自定义外观。...Fancybox 可以节省您时间并帮助您轻松创建包含图像、iframe视频或任何类型 HTML 内容漂亮、现代叠加窗口。...wheel {String|null} 在图像上检测到双击事件时要执行操作。默认值:zoom 可能值:zoom、slide或。...支持 Fancybox包含插件提供了额外媒体类型支持:图像,用于内嵌内容、iframe视频(HTML5、Youtube 和 Vimeo)、Google 地图和 Ajax HTML 。

    2.5K20

    如何使用js-x-ray检测JavaScript和Node.js常见恶意行为

    js-x-ray js-x-ray是一款功能强大开源SAST扫描工具,其本质上是一个静态分析工具,可以帮助广大研究人员检测JavaScript和Node.js常见恶意行为&模式。...该项目的目标是成功检测所有可疑JavaScript代码,即那些显然是出于恶意目的添加或注入代码。大多数时候,网络攻击者会尽量隐藏他们代码行为,以避免触发检测引擎或增加分析人员分析难度。...而js-x-ray任务就是理解和分析这些模式,以帮助我们检测到恶意代码。...功能介绍 检索js所需依赖项和文件; 检测不安全正则表达式; 当AST分析出现问题或无法遵循语句时获取警告; 突出显示常见攻击模式和API调用; 能够跟踪并分析危险js全局使用; 检测经过混淆处理代码...返回警告 名称 描述 parsing-error 使用meriyah解析JavaScript代码时出错。这意味着从string到AST转换失败了。

    2.3K10

    详解JavaScript跨域问题

    服务器端对于CORS支持,主要就是通过设置Access-Control-Allow-Origin来进行。如果浏览器检测到相应设置,就可以允许Ajax进行跨域访问。...> 最终,输出结果为:dosomething(['a','b','c']); 如果你页面使用jquery,那么通过它封装方法就能很方便来进行jsonp操作了。...JSONP缺点则是:它只支持GET请求而不支持POST等其它类型HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域两个页面之间如何进行JavaScript调用问题。...通过修改document.domain来跨子域 浏览器都有一个同源策略,其限制之一就是第一种方法我们说不能通过ajax方法去请求不同源文档。...iframe框架是不同域,所以我们是无法通过在页面书写js代码来获取iframe东西: function test

    1.1K100

    javascript跨域

    所谓Javascript跨域问题,是指在一个域下页面通过js访问另一个不同域下数据对象,出于安全性考虑,几乎所有浏览器都不允许这种跨域访问,这就导致在一些ajax和iframe应用,使用跨域web...跨域请求无处不在,平时我们在开发活动过程,活动静态页面通过Javascript访问前端CGI就是明显主域相同,子域不同跨域例子,一般活动静态页面都是类似这样(http://业务名.xx.com/...实现跨域原理:通过 GET 方式请求载入并执行一个 JavaScript 文件, 相当于通过src形式导入一个外部js 2.getJson方法 语法:jQuery.getJSON(url,data..., dataType: json }); 在jQuery 1.2 ,您可以通过使用 JSONP 形式回调函数来加载其他网域 JSON 数据,如 "myurl?...可以是页面iframecontentWindow属性;window.open返回值;通过name或下标从window.frames取到值。

    1.5K40

    web跨域解决方案

    根据这个策略,在baidu.com下页面包含JavaScript代码,不能访问在google.com域名下页面内容;甚至不同子域名之间页面也不能通过JavaScript代码互相访问。...我们举例说明:   比如一个黑客,他利用iframe把真正银行登录页面嵌到他页面上,当你使用真实用户名和密码登录时,如果没有同源限制,他页面就可以通过javascript读取到你表单输入内容...服务器方面 服务器端对于CORS支持,主要就是通过设置Access-Control-Allow-Origin来进行。如果浏览器检测到相应设置,就可以允许Ajax进行跨域访问。...,这 个页面与它里面的iframe框架是不同域,所以我们是无法通过在页面书写js代码来获取iframe东西。   ...要等iframe标签完成加载B页面之后,再取iframe对象contentDocument,否则如果B页面没有被iframe完全加载,在A页面通过contentDocument属性就取不到B页面

    2.7K100

    Jquery取得iframe中元素几种方法Javascript Jquery获取Iframe元素、内容或者ID,反之也行!

    ('iframeId').contentWindow.document.body).html()  显示iframebody元素内容。...('test').style.color='red'    通过在index.html访问ID名为'koyoz'iframe页面,并取得此iframe页面内ID为'test' 对象,并将其颜色设置为红色...在index.html里面借助jQuery访问: JavaScript代码 $("#koyoz").contents().find("#test").css('color','red');    此代码效果和...收集网上一些示例: 用jQueryIFRAME里取得父窗口某个元素值 只好用DOM方法与jquery方法结合方式实现了 1....IFrameIframe,就再加一个frames子级就行了,如: $(window.frames["iframe1"].frames["iframe2"].document).find("input

    8.7K90

    js获取iframe内容(iframe内嵌页面)

    大家好,又见面了,我是你们朋友全栈君。 js 如何获取包含自己iframe 属性 a.html 如何在b.html里获取包含他iframeid 在父页面定义函数,再到子页面调用。...iframe for(i=0;i js怎样获取iframe,src参数 如何获取iframesrc里面的属性 js如何修改iframe 中元素属性 iframe 属性 及用法越详细越好 。。...在线等 iframe元素功能是在一个html内嵌一个文档,创建一个浮动iframe可以嵌在网页任意部分 name:内嵌帧名称 width:内嵌帧宽度(可用像素值或百分比) height:内嵌帧高度...(可用像素值或百分比) frameborder:内嵌帧边框 marginwidth:帧内文 jQuery怎么给iframesrc赋值 给iframe src赋值,代码如下: 特别注意: 1.上述jquery...JavaScript如何修改页面iframe属性值 HTML5有客户端数据储存方法,但是支持浏览器不多。

    24.6K50

    SpringMVC—Ajax使用

    JavaScript and XML(异步 JavaScript 和 XML)。...注册时,输入用户名自动检测用户是否已经存在 登录时,提示用户名密码错误 删除数据行时,将行id发送到后台,后台在数据库删除,数据库删除成功后,子啊页面DOM中将数据行删除 … jQuery.ajax...,对他进行了封装,方便调用 通过 jQuery AJAX 方法,能够使用HTTP GEt和HTTP post 从远程服务器上请求文本,HTML,XML或JSON-同时 能吧这些外部数据直接载入网页被选元素...,在插入DOM时,如果包含JavaScript标签,则会尝试去执行。..."script": 尝试将返回值当作JavaScript去执行,然后再将服务器端返回内容转换成普通文本格式 "json": 将服务器端返回内容转换成相应JavaScript对象 "jsonp":

    1.7K10

    Web前端学习笔记之前端跨域知识总结

    iframe框架是不同域,所以我们是无法通过在页面书写js代码来获取iframe东西: function test()...> 最终,输出结果为:dosomething([‘a’,’b’,’c’]); 如果你页面使用jquery,那么通过它封装方法就能很方便来进行jsonp操作了。...JSONP缺点则是:它只支持GET请求而不支持POST等其它类型HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域两个页面之间如何进行JavaScript调用问题。...服务器端对于CORS支持,主要就是通过设置Access-Control-Allow-Origin来进行。如果浏览器检测到相应设置,就可以允许Ajax进行跨域访问。...iframe.src = 'about:blank'; }; 或者将里面的 about:blank 替换成某个同源页面(about:blank,javascript: 和 data: 内容,继承了载入他们页面的源

    1.1K30
    领券