在主框架下引入的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标签？
支持跨域的检测标签有如下几个：
- script
- img
- link
- video
- audio
支持 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"
// 这里设置需要检测的url
link.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>
如有误或遗漏，欢迎大家指正。
-
vue 嵌套 iframe 打开失败 提示 检测到疑似window复写或者嵌套iframe 点击超链接icon，可以打开对应文件 我是 vue项目(A项目)通过 iframe 嵌套另一个vue 项目(B项目)的页面，然后在B项目在通过iframe 嵌套A项目的页面，这样就打不开嵌套的A项目的页面了，（个人感觉是多次嵌套的问题）。B项目单独运行的话是可以打开页面的
-
比如我点击某个链接要打开a页面，要判断是否存在已打开的a页面，这步我使用postMessage来实现通讯，可以实现判断是否已打开，但是要怎么切换到已打开的a页面吗？
-
问题内容： 我正在尝试检查用户单击按钮后是否已加载iframe。 我有 的HTML 有什么建议么？ 顺便说一下，我的iframe是动态创建的。它不会随初始页面加载一起加载。 问题答案： 您可以尝试使用（） 更新： 使用普通格式 更新： 您也可以尝试一下（动态iframe）
-
我正在尝试检查用户单击按钮后是否加载了iframe。 我有 顺便说一下，我的iframe是动态创建的。它不会与初始页面加载一起加载。
-
本文向大家介绍JS的location.href跳出框架打开新页面的方法，包括了JS的location.href跳出框架打开新页面的方法的使用技巧和注意事项，需要的朋友参考一下 今天遇到个问题，后面在框架中，当判断登录失效后要返回登录页面，但登录页面却在框架内打开，我想让它直接跳出框架打开（这里不是打开新窗口），终于在网上找到了办法，分享给大家： echo "<script language=\"j
-
以下是我尝试的： 将设置为。永远不会被调用 将设置为。从不调用 研究了和类。找不到类似的内容。