JS遍历JSON设置embed src并每60秒切换两个PDF嵌入块显隐

核心问题说明 #

• 原有JSON.parse(files)代码错误：files本身已经是JS对象，不需要解析，直接遍历即可
• none是CSS字符串值，必须加引号写成'none'，否则会被识别为未定义变量报错
• 原有定时逻辑仅执行一次隐藏操作，无法实现循环切换效果
• 没有把遍历得到的URL和embed标签对应绑定赋值

完整修改后的代码 #

把你@section('loadjs')里的script标签内容替换为以下代码即可：

<script>
const files = {
  "1": "https://test.s3.aws/test1.pdf",
  "2": "https://test.s3.aws/test2.pdf"
};
// 获取所有pdf embed标签
const pdfEmbeds = document.getElementsByClassName('pdf');
// 公共PDF参数后缀，统一拼接避免重复代码
const pdfParam = '#zoom=85&view=Fit&scrollbar=0&toolbar=0&statusbar=0&navpanes=0';

// 遍历赋值src
Object.values(files).forEach((url, index) => {
  pdfEmbeds[index].src = url + pdfParam;
});

// 切换逻辑：记录当前显示的索引，初始为0对应第一个默认显示的embed
let activeIndex = 0;
// 每60秒执行一次切换
setInterval(() => {
  // 隐藏当前展示的embed
  pdfEmbeds[activeIndex].style.display = 'none';
  // 切换索引：0变1，1变0
  activeIndex = activeIndex === 0 ? 1 : 0;
  // 展示新的embed
  pdfEmbeds[activeIndex].style.display = 'block';
}, 60000);
</script>

额外优化建议 #

如果你不需要保留原有embed标签里写死的src，可直接把两个embed的src属性留空，所有src统一由JS赋值即可；也可以把embed的公共样式抽离到CSS类里，减少HTML重复代码。

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