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

[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>

个人简介

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

主目录

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/410399.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Java学习笔记】线程学习笔记

一、资源 http://blog.csdn.net/axman/article/details/431796 这个博客里有Java多线程、线程池的一系列&#xff0c;从基础开始就很清楚&#xff0c;牛人 二、重点 今天读到了基础篇(三)&#xff0c;跳过了后面的方法介绍&#xff0c;以后估计还得补上来的.... 做笔记...... 1…

TortoiseSVN2IDE.pas源代码

unit TortoiseSVN2IDE; {$R icons.res} interface uses ToolsAPI, SysUtils, Windows, Dialogs, Menus, Registry, ShellApi, Classes, Controls, Graphics, ImgList, ExtCtrls, ActnList,Forms;//增加了对Forms单元的引用 const SVN_PROJECT_EXPLORER 0; SVN_LOG 1…

.net 使用阿里云RocketMQ

1.首先我们来讲解一下消息队列的作用 比如说我们的订单系统&#xff0c;再客户订单生成了以后&#xff0c;可能会有 快递系统&#xff0c;通知系统&#xff0c;和打印系统需要用到当前订单的详细内容 所以这个时候常规的操作是在A里面通过代码调用B&#xff0c;C &#xff…

[html] 使用a标签的download属性下载文件会有跨域问题吗?如何解决?

[html] 使用a标签的download属性下载文件会有跨域问题吗&#xff1f;如何解决&#xff1f; 最近刚遇到这个问题&#xff0c;后台返回的图片链接&#xff0c;点击按钮批量下载&#xff0c;a标签的 download 属性只对同源文件有效&#xff0c; 所以我们这里先把图片 url 转为 bl…

tensorflow 目标分割_Tensorflow中的控制流和优化器

控制流只要对tensorflow有一点了解&#xff0c;都应该知道graph是tensorflow最基本的一个结构。Tensorflow的所有计算都是以图作为依据的。图的nodes表示一些基本的数学运算&#xff0c;比如加法&#xff0c;卷积&#xff0c;pool等。Node使用protoBuf来进行描述&#xff0c;包…

Reflector 已经out了,试试ILSpy

Reflector是.NET开发中必备的反编译工具。即使没有用在反编译领域&#xff0c;也常常用它来检查程序集的命名规范&#xff0c;命名空间是否合理&#xff0c;组织类型的方法是否需要改善。举例说明&#xff0c;它有一个可以查看程序集完整名称的功能&#xff0c;请看下图 这里的…

Go语言通过odbc驱动连接华为高斯数据库

1.下载odbc驱动 下载后安装psqlodbc_x64.msi 安装成功后可在odbc数据源中看到以下内容 2.测试odbc驱动 在用户dsn中选择添加 输入对应的连接内容点击test 如果显示以下内容则表示驱动正常可使用odbc连接高斯数据库 3.go 语言编写 其中依赖包需要使用命令安装 go get github.c…

MFC对话框打印预览异常问题解决

昨天在别人的电脑上成功运行了上次我写的打印预览程序&#xff0c;但是今天换了一台电脑就不能运行了&#xff0c;让我觉得非常奇怪。 提示的错误信息是“内存XXXX不能为read”&#xff0c;“mfc100d.dll”中有未经处理的异常。 奇怪的是&#xff0c;我加了try catch语句后依然…

[html] 请实现一个网站加载进度条

[html] 请实现一个网站加载进度条 import { memo } from react; import { useLifecycles } from react-use; import NProgress from nprogress; import nprogress/nprogress.css;const ProgressLine memo(() > {useLifecycles(() > {NProgress.start();},() > {NPro…

activiti高亮显示图片_【正点原子FPGA连载】第二十章SD卡读BMP图片HDMI显示实验领航者 ZYNQ 之嵌入式开发指南...

1&#xff09;实验平台&#xff1a;正点原子领航者ZYNQ开发板2&#xff09;平台购买地址&#xff1a;https://item.taobao.com/item.htm?&id6061601087613&#xff09;全套实验源码手册视频下载地址&#xff1a;http://www.openedv.com/docs/boards/fpga/zdyz_linhanz.htm…

.net Redis缓存优化提高加载速度和服务器性能(一)

距离上次服务器将图片转义至oss服务器提交加载速度已经有一段时日了 对于图片转移至oss服务器优化前后的结果可以查看我之前编写的文章点击查看 如今随着商户数的增多&#xff0c;数据的增多&#xff0c;服务器的性能再一次达到了顶峰&#xff0c;并且由于是点餐系统的缘故订…

DSA通讯协议

1.DSA-接口规范 DSA总线是一个异步&#xff0c;双向的&#xff0c;内部设计用于在一组两个微处理器之间的通信总线。 它有三个双向线&#xff1a; ● DATA -启动同步和数据传输 ● STB -数据选通&#xff08;当STB为低电平时数据是有效的&#xff09; ● ACK -启动同步&#xf…

火星人谚语系列之六:一次真实应用

总目录&#xff1a;之一&#xff0c;之二&#xff0c;之三&#xff0c;之四&#xff0c;之五&#xff0c;之六&#xff0c;之七&#xff0c;之八这是2011年7月的一次QQ群对话记录&#xff0c;做了匿名化处理&#xff0c;并重新调整了顺序&#xff0c;以便于阅读。对话的开始&am…

[html] 怎样禁用页面中的右键、打印、另存为、复制等功能?

[html] 怎样禁用页面中的右键、打印、另存为、复制等功能&#xff1f; <body oncontextmenuself.event.returnValuefalse onselectstart"return false">个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。…

ubuntu 启动图形界面命令_Windows 10 远程连接 Ubuntu 18.04 Server图形界面

目录 0. 环境信息和说明Ubuntu 18.04上安装xrdp远程ubuntu-desktop桌面服务Ubuntu 18.04上安装xrdp远程Xfce桌面服务Ubuntu 18.04上安装vnc远程Xfce桌面服务0.环境信息和说明-----------Ubuntu版本# cat /etc/os-releaseNAME"Ubuntu"VERSION"18.04.3 LTS (Bioni…

动态条形图(RunBargraph)用于数据展示

最近公司项目需要做各种图标展示&#xff0c;用了Echarts的条形图和柱状图&#xff0c;但是老板还是觉得不够生动&#xff0c;看来时候祭出大招了 由此衍生在空余时间写下了此篇博客&#xff0c;首先还是看效果图: 注意&#xff0c;此图中数据并非真实数据&#xff0c;只是为…

找到的程序集清单定义与程序集引用不匹配

使用 MVCPager 做分页&#xff0c;调试时出现如上错误&#xff0c;甚是郁闷。自己使用的版本是 MvcPager1.5Mvc2.dll 使用 ILDASM 查看 manifest 也都没问题&#xff0c;真是奇了怪了。抱着试试看的态度把 MvcPager1.5Mvc2.dll 重命名成 MvcPager.dll 尼玛的居然成功了&#xf…

面试准备-Shell脚本

一、Shell脚本是什么&#xff1f; 一个Shell脚本是一个文本文件&#xff0c;包含一个或多个命令。我们经常需要使用多个命令来完成一项任务&#xff0c;我们可以添加这些所有命令在一个文本文件(Shell脚本)来完成这些日常工作任务。 二、运行 Shell 脚本有两种方法&#xff1a;…

网页实现凭证金额分割线_一位整理过5000个网页书签的大神分享:实用的书签管理方案...

我们在日常使用使用搜索引擎的过程中&#xff0c;会逐渐累积各式各样丰富的网站。而当我们保存的书签过多的时候&#xff0c;如果没有一套实用的管理方案&#xff0c;就会造成书签混乱&#xff0c;加大我们搜索的难度。所以&#xff0c;下面跟大家分享一套实用的书签管理方案&a…

[html] 实现一个页面锁屏的功能

[html] 实现一个页面锁屏的功能 <!DOCTYPE html> <html> <head> <title>Ctrll监控锁屏</title> </head> <body> <div id"message_div"></div> <script type"text/javascript" languageJavaScri…