全部分类
星敏君_8339
2026-10-22
560人浏览
原创
fallback内容必须写在object标签内部且为合法html流内容,浏览器仅在data返回404、type未注册或typemustmatch校验失败时渲染;script、iframe等可执行标签会被忽略甚至阻塞渲染。
浏览器只会在加载彻底失败时(比如data返回404、type完全未注册、或typemustmatch校验失败)才渲染标签体内的内容。但这个“内容”不能是任意结构——它必须是合法的HTML流内容,比如<p></p>、<img>、<div>(注意:部分老规范限制<code><div>在<code><object></object>内不合法,实际中<p></p>最稳妥)。<script></script>、<iframe></iframe>、<video></video>等可执行或嵌套资源会直接被忽略,甚至导致整个fallback区域不渲染。 ✅ 正确:<object data="doc.pdf" type="application/pdf"><p>PDF加载失败,请@#@#@#@#@#@#@#@#@#@0</p></object> ❌ 错误:<object data="doc.pdf"><script>location.href='fallback.html'</script></object> —— 脚本不会执行,还可能阻塞解析 ⚠️ 注意:<param>标签不参与fallback,它只对成功加载的插件生效;降级时你读不到原始data值,得提前用JS提取存变量 为什么写了fallback却没显示?常见触发条件不匹配 很多人以为只要data路径不对就一定走fallback,其实不是。Chrome只在HTTP状态码为404或MIME类型与type严重不匹配时才触发;Firefox更激进,插件未启用、CSP拦截、甚至type="application/x-shockwave-flash"这种已废弃类型,都可能直接展示fallback——哪怕服务器返回了200和HTML内容。 Html2md 使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL... 下载 PDF场景下,若服务端返回Content-Type: text/html但type="application/pdf",加typemustmatch才能强制fallback type="pdf"或留空,浏览器根本不会尝试PDF渲染,直接走fallback,这不是错误而是预期行为 本地开发用file://协议时,Firefox常忽略type,只看文件后缀,此时fallback几乎不触发 想动态控制fallback?别写死,用onerror + DOM操作 onerror事件在现代浏览器中对<object></object>支持不稳定:Flash/Java类插件失败时不触发;PDF加载失败时Chrome可能触发,Firefox则不一定。所以依赖它做兜底不可靠,但真需要JS逻辑(比如上报错误、切换iframe),必须用事件+动态注入,而不是把逻辑硬塞进标签体。 先提取配置:const obj = document.querySelector('object'); const src = obj.getAttribute('data'); 再绑定:obj.addEventListener('error', () => { obj.innerHTML = '<p>加载异常,正在重试...</p>'; }); 避免document.write()——它会清空整个页面,仅限极老环境 真正该考虑的是:现在还该用object吗? PDF用<iframe src="xxx.pdf"></iframe>更稳,音视频必须用<video></video>或<audio></audio>,SVG交互必须内联。只有两种情况值得保留<object></object>:一是需无JS环境下的多层HTML fallback(比如政府静态页面),二是服务端能严格控制响应头且需typemustmatch强校验的PDF场景。其他所有用途,包括Flash、Java Applet、SWF图表,均已失效,fallback只是幻觉。 最容易被忽略的一点:微信内置WebView对object的data路径解析极不稳定,中文路径、query参数未编码、相对路径层级过深,都可能导致白屏而非fallback——这时连onerror都不触发,唯一解法是提前转成绝对URL并encodeURIComponent。
data
type
typemustmatch
<p></p>
<img>
<div>(注意:部分老规范限制<code><div>在<code><object></object>
<script></script>
<iframe></iframe>
<video></video>
<object data="doc.pdf" type="application/pdf"><p>PDF加载失败,请@#@#@#@#@#@#@#@#@#@0</p></object>
<object data="doc.pdf"><script>location.href='fallback.html'</script></object>
<param>
很多人以为只要data路径不对就一定走fallback,其实不是。Chrome只在HTTP状态码为404或MIME类型与type严重不匹配时才触发;Firefox更激进,插件未启用、CSP拦截、甚至type="application/x-shockwave-flash"这种已废弃类型,都可能直接展示fallback——哪怕服务器返回了200和HTML内容。
type="application/x-shockwave-flash"
使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...
Content-Type: text/html
type="application/pdf"
type="pdf"
file://
onerror事件在现代浏览器中对<object></object>支持不稳定:Flash/Java类插件失败时不触发;PDF加载失败时Chrome可能触发,Firefox则不一定。所以依赖它做兜底不可靠,但真需要JS逻辑(比如上报错误、切换iframe),必须用事件+动态注入,而不是把逻辑硬塞进标签体。
onerror
<object></object>
iframe
const obj = document.querySelector('object'); const src = obj.getAttribute('data');
obj.addEventListener('error', () => { obj.innerHTML = '<p>加载异常,正在重试...</p>'; });
document.write()
PDF用<iframe src="xxx.pdf"></iframe>更稳,音视频必须用<video></video>或<audio></audio>,SVG交互必须内联。只有两种情况值得保留<object></object>:一是需无JS环境下的多层HTML fallback(比如政府静态页面),二是服务端能严格控制响应头且需typemustmatch强校验的PDF场景。其他所有用途,包括Flash、Java Applet、SWF图表,均已失效,fallback只是幻觉。
<iframe src="xxx.pdf"></iframe>
<audio></audio>
最容易被忽略的一点:微信内置WebView对object的data路径解析极不稳定,中文路径、query参数未编码、相对路径层级过深,都可能导致白屏而非fallback——这时连onerror都不触发,唯一解法是提前转成绝对URL并encodeURIComponent。
object
前端入门到VUE实战笔记:立即使用 在学习笔记中,你将探索 前端 的入门与实战技巧!
相关文章
HTML怎么把文件上传框做成半透明遮罩
HTML全局属性draggable怎么实现拖拽?拖放API结合教程
HTML响应式图片居中完整设置教程
HTML响应式图片缩放居中技巧
HTML下拉列表选项高度怎么改
HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!
相关标签:
本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
上一篇:如何使用HTML图片资源管理提升页面性能
下一篇:HTML响应式模板怎么删多余模块?网页结构精简技巧
作者最新文章
HTML怎么让超链接在弹性容器中居中
HTML怎么实现不同设备下的响应式图片居中
旧网页迁移到HTML区域映射的方法
HTML怎么在网页底部栏放置加入购物车按钮
HTML怎么在循环生成图标时安全配置onerror
HTML怎么禁止用户复制ol列表内容
HTML区域映射结合SVG实现交互
HTML怎么替换响应式模板图片
HTML排版段落缩进怎么保持整齐
热门AI工具
切问学术
豆包大模型
DeepSeek
SkildArt
二狗PPT
VibeKnow
墨刀AI
PixTV
相关专题
html版权符号是“©”,可以在html源文件中直接输入或者从word中复制粘贴过来,php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。
2023.06.14
6415
7
html在线编辑器是用于在线编辑的工具,编辑的内容是基于HTML的文档。它经常被应用于留言板留言、论坛发贴、Blog编写日志或等需要用户输入普通HTML的地方,是Web应用的常用模块之一。php中文网为大家带来了html在线编辑器的相关教程、以及相关文章等内容,供大家免费下载使用。
2023.06.21
3592
4
html网页制作是指使用超文本标记语言来设计和创建网页的过程,html是一种标记语言,它使用标记来描述文档结构和语义,并定义了网页中的各种元素和内容的呈现方式。本专题为大家提供html网页制作的相关的文章、下载、课程内容,供大家免费下载体验。
2023.07.31
3250
5
html空格是一种用于在网页中添加间隔和对齐文本的特殊字符,被用于在网页中插入额外的空间,以改变元素之间的排列和对齐方式。本专题为大家提供html空格的相关的文章、下载、课程内容,供大家免费下载体验。
2023.08.01
3279
HTML是一种标准标记语言,用于创建和呈现网页的结构和内容,是互联网发展的基石,为网页开发提供了丰富的功能和灵活性。本专题为大家提供html相关的各种文章、以及下载和课程。
2023.08.11
4979
6
在网页设计中,字体大小的选择是至关重要的。合理的字体大小不仅可以提升网页的可读性,还能够影响用户对网页整体布局的感知。php中文网将介绍一些常用的方法和技巧,帮助您在HTML中设置合适的字体大小。
3221
3
html转txt的方法有使用文本编辑器、使用在线转换工具和使用Python编程。本专题为大家提供html转txt相关的文章、下载、课程内容,供大家免费下载体验。
2023.08.31
3029
html文本框代码:1、单行文本框【<input type="text" style="height:..;width:..;" />】;2、多行文本框【textarea style=";height:;"></textare】。
2023.09.01
2668
HTML嵌入CSS样式的方法有内联样式、内部样式表和外部样式表。本专题为大家提供CSS样式相关的文章、下载、课程内容,供大家免费下载体验。
2023.09.20
2748
热门下载
相关下载
精品课程
共0课时 | 0人学习
共1课时 | 224人学习
共6课时 | 54.7万人学习
共89课时 | 133.9万人学习
共49课时 | 82.5万人学习
共22课时 | 2.5万人学习
共31课时 | 3.5万人学习
共28课时 | 4.5万人学习
最新文章