怎么在父页面嵌套一个 iframe将播放器放在 iframe 中,这样在切换页面时,播放器不会被销毁,保留播放状态。
时间: 2024-02-15 07:04:58 浏览: 122
js中iframe调用父页面的方法
在父页面嵌套一个 iframe,可以使用以下步骤:
1. 在父页面中创建一个 iframe,设置其 src 属性为要嵌入的页面,如下所示:
```html
<iframe src="player.html"></iframe>
```
2. 在 player.html 页面中添加播放器的相关代码,如下所示:
```html
<!-- 播放器代码 -->
<audio src="music.mp3" id="audio"></audio>
<button onclick="play()">播放</button>
<button onclick="pause()">暂停</button>
<!-- JavaScript 代码 -->
<script>
var audio = document.getElementById('audio');
function play() {
audio.play();
}
function pause() {
audio.pause();
}
</script>
```
3. 在父页面中使用 JavaScript 代码来控制 iframe 中的播放器,如下所示:
```html
<!-- 父页面中的 JavaScript 代码 -->
<script>
var iframe = document.querySelector('iframe');
var iframeWindow = iframe.contentWindow;
var audio = iframeWindow.document.getElementById('audio');
function play() {
audio.play();
}
function pause() {
audio.pause();
}
</script>
```
通过上述步骤,我们就可以将播放器放在 iframe 中,在切换页面时,播放器不会被销毁,保留播放状态。
阅读全文