如何在javascript的几个页面之间共享音频元素

how to share audio element among several pages in javascript

本文关键字：几个 之间 共享 元素 音频 javascript      更新时间：2023-09-26

我有一个网站，索引页只有:

  • 包含iFrame
  • 启动音频播放器并开始播放音轨。

不同的链接在iFrame中打开，所以我将所有内容隐藏在index.html下。我通过下面这行创建音频播放器:

var audio = document.createElement('audio");

我对范围感到困惑。我想从其他将在iFrame中打开的文档中访问这个音频变量。是否有一种方法来存储这个音频元素，以便任何页面都可以访问它?或者是否有一个函数允许按类型检索它，如getElement('audio') ?

我唯一的目标是开始在一个页面上播放音乐，并能够从另一个页面控制它(能够从另一个页面调用audio.play()和audio.pause())

您可以通过访问父文档上下文并从中获取音频元素来实现这一点。

在父

中
// Method 1
var audio = document.createElement('audio')
audio.id = 'my-specific-audio'
document.body.appendChild(audio)
// Method 2
window['my-audio-key'] = audio


// Method 1
var audio = window.parent.document.getElementById('my-specific-audio')
// Method 2
var audio = window.parent['my-audio-key']

一个警告:两个帧必须是相同的起源(域)。浏览器不允许跨域上下文访问

如果您正在使用框架，并且您想控制单个元素，那么您可以声明该元素并使用parent.对象访问它。所以，你有:

var audio = document.createElement('audio");

上面的代码在index.htm和每个页面中，您可以使用:

parent.audio.play();
parent.audio.pause();

注意:这只适用于当两个帧来自同一域

相关文章：