前端

2024-07-10 04:36| 来源: 网络整理| 查看: 265

前言

现在有个需求，就是切换html还能使背景音乐继续播放，不会重新播放。众所周知，html一旦切换，页面内容会重新加载，音乐也会重新加载播放，怎么才能做到音乐连续播放，而不是重新播放呢？

查资料发现前辈们提了个办法：用iframe来切换页面，这样在iframe本身的音乐就不会中断重新刷新了。嗯！好办法！ iframe代码如下：

DOCTYPE html> Title

有一个问题，就是iframe这个页面，如何跟随它的子页面进行高度的自适应呢？给出如下代码：

/** * 这个script脚本只针对iframe切换页面进行iframe高度的自适应 * @param obj * @constructor */ //iframe自适应高度 function SetWinHeight(obj) { var win=obj; if (document.getElementById) { if (win && !window.opera) { if (win.contentDocument && win.contentDocument.body.offsetHeight) win.height = win.contentDocument.body.offsetHeight; else if(win.Document && win.Document.body.scrollHeight) win.height = win.Document.body.scrollHeight; } } }

但是同时又要解决一个问题，就是如果用iframe来加载页面，那在子页面进行跳转的时候，肯定是需要获取子页面的名字，再更换iframe父页面的src。那么子页面怎么传递数据给iframe这个父页面呢？ iframe父页面

//父页面监听：获取点击的a标签，来切换iframe的src，进行更换显示页面 window.addEventListener("message", function(event){ var data = event.data; console.log(data); document.getElementById("win").src = data.page; //此时data.page就是子页面里changePage函数里传来的page数值 })

子页面：

function changePage(page) { window.parent.postMessage({ page: page }, "*"); }

至此就结束啦，iframe完成了页面的切换，音乐也可以继续播放了。

【本文地址】

前端

前端

今日新闻

推荐新闻