Question

我的网站的索引页只有：

包含iFrame
启动音频播放器并开始播放曲目。

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

bundle install

我对范围界定感到困惑。我想从将在iFrame中打开的其他文档中访问此音频变量。有没有办法存储此音频元素，以便任何页面都可以访问它？或者是否有允许按类型检索它的函数，如var audio = document.createElement('audio");？

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

Answer 1

您可以通过访问父文档上下文并从那里获取音频元素来完成此操作。

在父母

中

// 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']

一个警告：两个帧必须是相同的来源（域）。浏览器不允许跨源上下文访问。

Answer 2

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

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

index.htm以及每个页面中的上述代码，您可以使用：

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

注意：仅当两个帧来自同一个域时才有效。

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

2 个答案: