[html] 在主框架下引入的iframe，如果检测这个iframe是否能打开，如果打不开则跳到404页面
生活随笔
收集整理的這篇文章主要介紹了
[html] 在主框架下引入的iframe，如果检测这个iframe是否能打开，如果打不开则跳到404页面
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
[html] 在主框架下引入的iframe，如果檢測這個iframe是否能打開，如果打不開則跳到404頁面
首先我們知道 iframe 只有 onload 事件，沒有 onerror 事件，無論 iframe 能否正常加載都會正常觸發 onload 事件。但是由于場景不同，最終所能使用的方案也不同。 非跨域如果不跨域，那問題就很好解決了，有以下幾種方案可以使用：使用 ajax 發送一個 head 請求，看狀態是否返回 200 （之所以發送 head 請求，是輕量級，響應速度快）。檢測 iframe 元素特征，在 iframe onload 觸發后，檢測 html 元素，例如有沒有 title，內容是否為空等?？缬蛉绻缬虻那闆r，要看你是否能控制跨域服務器。 能控制跨域服務器可以使用 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页面的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java httpclient读取htm
- 下一篇： 前端学习（2957）：组件之间的参数传递