iframe加载PDF/JPEG文档在移动端/平板端不显示内容如何解决？

• 移动端浏览器内置的PDF/媒体渲染逻辑和PC端不同，部分移动端浏览器默认禁用iframe内直接加载非HTML类静态资源的渲染能力
• 原代码中scrolling="no"属性会在移动端截断超出固定高度的内容，固定height="500"也无法适配不同尺寸的移动设备视口
• iOS Safari对iframe的高度计算存在默认兼容问题，会自动将iframe高度撑开为内容实际高度，超出视口的部分无法滚动查看

修改后的代码如下：

<div style="width: 100%; min-height: 500px; overflow: auto; -webkit-overflow-scrolling: touch;">
  <iframe id="iframe" src="` + urlDoc.data.dir + `" width="100%" height="100%" runat="server" scrolling="auto" allow="fullscreen" style="border: none;"></iframe>
</div>

核心修改点：

• 外层加滚动容器，-webkit-overflow-scrolling: touch属性专门适配iOS的顺滑滚动，解决iOS下iframe内容无法滚动的问题
• 移除iframe固定高度500，改为继承父容器高度，同时父容器设置最小高度保证PC端原有展示效果
• 修改scrolling属性为auto，允许内容溢出时滚动
• 移除默认边框避免样式异常，添加全屏权限适配移动端全屏查看需求

加载JPEG格式资源 #

直接使用<img>标签即可，原生响应式支持更好，资源加载性能远高于iframe：

<img src="` + urlDoc.data.dir + `" style="width: 100%; height: auto; object-fit: contain;" alt="文档预览图">

加载PDF格式资源 #

方法1：使用<embed>标签，兼容性优于iframe #

<embed src="` + urlDoc.data.dir + `" type="application/pdf" width="100%" height="600px" />

如果浏览器不支持直接渲染PDF，会自动提示用户下载资源，不会出现空白无内容的情况。

方法2：使用PDF.js前端渲染（全端兼容最优） #

不依赖浏览器自带的PDF阅读器，所有端渲染效果完全一致，支持自定义工具栏、页码跳转、手势缩放等功能：

1. 将PDF.js预构建资源引入项目本地
2. 调用官方API将PDF渲染到指定DOM容器，可自由适配移动端视口尺寸、交互手势

内容的提问来源于stack exchange，提问作者giovani otero