[html] 在主框架下引入的iframe，如果检测这个iframe是否能打开，如果打不开则跳到404页面
生活随笔
收集整理的這篇文章主要介紹了
[html] 在主框架下引入的iframe，如果检测这个iframe是否能打开，如果打不开则跳到404页面
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
[html] 在主框架下引入的iframe，如果檢測(cè)這個(gè)iframe是否能打開，如果打不開則跳到404頁(yè)面
首先我們知道 iframe 只有 onload 事件，沒有 onerror 事件，無論 iframe 能否正常加載都會(huì)正常觸發(fā) onload 事件。但是由于場(chǎng)景不同，最終所能使用的方案也不同。 非跨域如果不跨域，那問題就很好解決了，有以下幾種方案可以使用：使用 ajax 發(fā)送一個(gè) head 請(qǐng)求，看狀態(tài)是否返回 200 （之所以發(fā)送 head 請(qǐng)求，是輕量級(jí)，響應(yīng)速度快）。檢測(cè) iframe 元素特征，在 iframe onload 觸發(fā)后，檢測(cè) html 元素，例如有沒有 title，內(nèi)容是否為空等?？缬蛉绻缬虻那闆r，要看你是否能控制跨域服務(wù)器。 能控制跨域服務(wù)器可以使用 jsonp 或 CORS，允許客戶端發(fā)送跨域 head 請(qǐng)求，來獲取是否狀態(tài)正常如果不能跨域的情況，見下面的通用方案 通用方案如果要兼容跨域/非跨域情況，可以使用下面幾種通用方案：使用定時(shí)器檢測(cè)，如果onload觸發(fā)時(shí)間晚于預(yù)設(shè)閾值，判定為無法加載。使用link標(biāo)簽來測(cè)試url能否訪問。下面重點(diǎn)來講下方案2。 link標(biāo)簽來測(cè)試url我們?yōu)槭裁匆褂胠ink標(biāo)簽？支持跨域的檢測(cè)標(biāo)簽有如下幾個(gè)：scriptimglinkvideoaudio支持 onload 和 onerror 的只有 script 、link、img之所以不用 img、script的原因是：img會(huì)檢測(cè)格式，如果不是圖片類型，也會(huì)觸發(fā)onerror。script可能會(huì)有安全問題（XSS等）。檢測(cè) 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"// 這里設(shè)置需要檢測(cè)的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>個(gè)人簡(jiǎn)介
我是歌謠，歡迎和大家一起交流前后端知識(shí)。放棄很容易，
但堅(jiān)持一定很酷。歡迎大家一起討論
主目錄
與歌謠一起通關(guān)前端面試題
總結(jié)
以上是生活随笔為你收集整理的[html] 在主框架下引入的iframe，如果检测这个iframe是否能打开，如果打不开则跳到404页面的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java httpclient读取htm
- 下一篇： transforms中RandomRes