[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>
个人简介
我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
但坚持一定很酷。欢迎大家一起讨论
主目录
与歌谣一起通关前端面试题