衡阳网站建设qiandu1,做网站签合同,湘潭seo优化价格,一个简单的游戏网站建设[html] 在主框架下引入的iframe#xff0c;如果检测这个iframe是否能打开#xff0c;如果打不开则跳到404页面
首先我们知道 iframe 只有 onload 事件#xff0c;没有 onerror 事件#xff0c;无论 iframe 能否正常加载都会正常触发 onload 事件。但是由于场景不同#x…[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语法。htmlbodyiframe idiframe onloadframeLoad() width100% height100% srchttps://baidu1.com/iframescriptfunction frameLoad() {console.log(frame load)}function accessTest() {var link document.createElement(link)link.rel stylesheetlink.type text/css// 这里设置需要检测的urllink.href https://baidu1.comlink.onload function () {console.log(accessTest success)}link.onerror function () {console.log(accessTest fail)}document.body.appendChild(link)}accessTest()/script
/body/html个人简介
我是歌谣欢迎和大家一起交流前后端知识。放弃很容易 但坚持一定很酷。欢迎大家一起讨论
主目录
与歌谣一起通关前端面试题
