[html] 在主框架下引入的iframe，如果检测这个iframe是否能打开，如果打不开则跳到404页面

首先我们知道 iframe 只有 onload 事件，没有 onerror 事件，无论 iframe 能否正常加载都会正常触发 onload 事件。但是由于场景不同，最终所能使用的方案也不同。
非跨域如果不跨域，那问题就很好解决了，有以下几种方案可以使用：使用 ajax 发送一个 head 请求，看状态是否返回 200 （之所以发送 head 请求，是轻量级，响应速度快）。检测 iframe 元素特征，在 iframe onload 触发后，检测 html 元素，例如有没有 title，内容是否为空等。跨域如果跨域的情况，要看你是否能控制跨域服务器。
能控制跨域服务器可以使用 jsonp 或 CORS，允许客户端发送跨域 head 请求，来获取是否状态正常如果不能跨域的情况，见下面的通用方案
通用方案如果要兼容跨域/非跨域情况，可以使用下面几种通用方案：使用定时器检测，如果onload触发时间晚于预设阈值，判定为无法加载。使用link标签来测试url能否访问。下面重点来讲下方案2。
link标签来测试url我们为什么要使用link标签？支持跨域的检测标签有如下几个：scriptimglinkvideoaudio支持 onload 和 onerror 的只有 script 、link、img之所以不用 img、script的原因是：img会检测格式，如果不是图片类型，也会触发onerror。script可能会有安全问题（XSS等）。检测 demo 代码如下为了兼容使用了es5语法。<html><body><iframe id="iframe" onload="frameLoad()" width="100%" height="100%" src="https://baidu1.com"></iframe><script>function frameLoad() {console.log('frame load')}function accessTest() {var link = document.createElement('link')link.rel = "stylesheet"link.type = "text/css"// 这里设置需要检测的urllink.href = "https://baidu1.com"link.onload = function () {console.log('accessTest success')}link.onerror = function () {console.log('accessTest fail')}document.body.appendChild(link)}accessTest()</script>
</body></html>

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

[html] 在主框架下引入的iframe，如果检测这个iframe是否能打开，如果打不开则跳到404页面相关推荐

iofactory.php,CI框架下引入类库资源PHPPowerPoint报出“ Cannot redeclare class IOFactory”...
在application/library下引用phpWord已经实现了导出word,但我在引入PHPPowerPoint时,总是提示重复申明IOfactory.PHPPowerPoint在没引入框架前 ...
iframe与主框架跨域相互访问方法
iframe 与主框架相互访问方法 1.同域相互访问假设A.html 与 b.html domain都是localhost (同域) A.html中iframe 嵌入 B.html,name=myf ...
广告域名审核之后跳转技术：点击域名A页面iframe框架下的链接，域名A跳转到域名B...
广告域名审核之后跳转技术:点击域名A页面iframe框架下的链接,域名A跳转到域名B 注:域名B为afish.cnblogs.com 域名A页面代码: <!DOCTYPE html PUBLIC ...
开源项目:DRR(deepstream-ros-robot)，针对pc主机端和nvidia-jetson边缘计算平台，实现了基于deepstream框架下的目标分类检测、车道线检测等，并配置了目标追踪
开源项目: <DRR(deepstream-ros-robot)> 项目介绍: 本项目针对pc主机端和nvidia-jetson边缘计算平台,基于deepstream框架进行加速推理搭建了 ...
powerdesigner 概念模型_“使用满足”分析框架下社交媒体用户持续使用行为的概念模型研究...
推文信息张敏,孟蝶,张艳."使用-满足"分析框架下社交媒体用户持续使用行为的概念模型研究[J].信息资源管理学报,2020,10(01):92-101. "使用-满足& ...
【GAN优化】一览IPM框架下的各种GAN
今天的这篇小文将是GAN模型理论介绍的最后一篇.有一些内容,所用数学技巧和方法非常高大上,理论结果也非常漂亮,但是完全搞明白其中的门门道道需要相当大精力和知识铺垫,况且实际运用也非常小众,但是作为模型 ...
ResNet在分别在Keras和tensorflow框架下的应用案例
一.残差神经网络--ResNet的综述深度学习网络的深度对最后的分类和识别的效果有着很大的影响,所以正常想法就是能把网络设计的越深越好, 但是事实上却不是这样,常规的网络的堆叠(plain netw ...
python flask框架下登录注册界面_Python-用户登录 Flask-Login
用户登录功能是 Web 系统一个基本功能,是为用户提供更好服务的基础,在 Flask 框架中怎么做用户登录功能呢?今天学习一下 Flask 的用户登录组件 Flask-Login Python 之所以 ...
Keras框架下的猫狗识别（一）
Tensorflow学习(使用jupyter notebook) Keras框架下的猫狗识别(二) Keras框架下的猫狗识别(三) 数据预处理 Tensorflow学习(使用jupyter note ...

[html] 在主框架下引入的iframe，如果检测这个iframe是否能打开，如果打不开则跳到404页面

[html] 在主框架下引入的iframe，如果检测这个iframe是否能打开，如果打不开则跳到404页面

个人简介

主目录

[html] 在主框架下引入的iframe，如果检测这个iframe是否能打开，如果打不开则跳到404页面相关推荐

最新文章

热门文章