如何根据设备类型动态修改iframe的src实现响应式PDF加载

你现有给iframe加ID的逻辑可以直接复用，只需要在同个DOM加载完成的回调里补充设备判断、src替换逻辑即可，不需要调整原有iframe的默认代码。

核心逻辑说明 #

• 初始iframe默认保留移动端适配的Google Docs Viewer地址作为兜底：哪怕JS加载异常、判断逻辑失效，移动端用户也能正常打开PDF，不会出现页面空白
• 加载完成后先判断访问设备类型，如果是桌面端，直接把iframe的src替换成本地PDF路径，调用浏览器自带的PDF阅读器打开，避开Google Docs加载失败的问题
• 设备判断用UA正则匹配，覆盖常见的手机、平板移动端设备

完整可运行代码 #

直接把下面的代码替换你原来的jQuery脚本块即可：

<script>
$(function(){
  // 给页面唯一iframe设置ID
  $('iframe').attr('id','something');

  // 移动端设备UA匹配规则，覆盖安卓、iOS、黑莓、Windows Phone等移动端系统
  const isMobileDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

  // 桌面端场景替换iframe地址为本地PDF
  if (!isMobileDevice) {
    $('#something').attr('src', 'images/cataloghi/file.pdf');
  }
});
</script>

可选优化建议 #

• 如果后续页面要加多个PDF文件，不用重复写判断逻辑：可以给每个iframe加自定义属性data-local-pdf存对应的本地PDF路径，初始化时遍历所有iframe，桌面端下统一读取属性值替换src即可
• 如果需要适配Windows二合一触控本这类混合设备，可以在判断条件里补充!('ontouchstart' in window)，进一步降低误判概率
• 不需要预加载两个地址，初始只加载移动端兜底地址即可，判断完成后桌面端才会触发本地PDF的加载，不会浪费带宽

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