У меня есть iFrame на моей странице, который мне нужно отредактировать высоту якоря. Этот якорь находится внутри элемента div, который также вложен в другой элемент div. Iframe получен из другого сайта (podbean), и они предоставили скрипт для предоставления класса глобальной области видимости.
https://developers.podbean.com/apidoc/widget#params
Это сценарий, который они просят вас включить:
var pbs = []; function PB(iframe) {
if (typeof(iframe) == 'string') {
iframe = document.querySelector(iframe);
}
this._iframe = iframe;
pbs.push(this);
this.eventListeners = {};
}
function searchInPBs(win) {
for (var i in pbs) {
if (pbs[i]._iframe.contentWindow == win) {
return i;
}
}
return -1;
}
PB.prototype.bind = function (event, callback) {
if (!(this.eventListeners[event] instanceof Array)) {
this.eventListeners[event] = [];
}
this.eventListeners[event].push(callback);
this._iframe.addEventListener(event, callback,false);
};
PB.prototype.unbind = function (event,callback) {
if(callback){
var index = this.eventListeners[event].indexOf(callback);
this._iframe.removeEventListener(event, callback,false);
if(index !== -1){
this.eventListeners[event].pop(index);
}
}else{
if (this.eventListeners[event] instanceof Array) {
for (var i in this.eventListeners[event]) {
this._iframe.removeEventListener(event, this.eventListeners[event][i],false);
}
this.eventListeners[event] = [];
}
}
};
PB.prototype.reload = function (url, options) {
//check url is player url
if(url.search('/media/player') === -1){
throw new Error("url is not active Podbean player");
}
if (typeof(options) === 'object'){
var urlSplit = url.split('?');
var urlParamsOrig = urlSplit[1].split('&');
var urlParams = {};
for(var k in urlParamsOrig){
var kv = urlParamsOrig[k].split('=');
urlParams[kv[0]] = kv[1];
}
for(k in options){
urlParams[k] = options[k];
}
var queryString = '?api=1';
for(k in urlParams){
queryString += ('&' + k + '=' + urlParams[k]);
}
queryString = queryString.trim('&');
url = urlSplit[0] + queryString;
}
this._iframe.src = url;
};
PB.prototype.play = function () {
this._post({action: "PB.Widget.API.PLAY"});
};
PB.prototype.pause = function () {
this._post({action: "PB.Widget.API.PAUSE"});
};
PB.prototype.next = function () {
this._post({action: "PB.Widget.API.NEXT"});
};
PB.prototype.prev = function () {
this._post({action: "PB.Widget.API.PREV"});
};
PB.prototype.toggle = function () {
this._post({action: "PB.Widget.API.TOGGLE"});
};
PB.prototype.seekTo = function (millisecond) {
this._post({action: "PB.Widget.API.SEEK_TO",value:millisecond});
};
PB.prototype.setVolume = function (volumnNumber) {
this._post({action: "PB.Widget.API.SET_VOLUME",value:volumnNumber});
};
PB.prototype.skip = function (index) {
this._post({action: "PB.Widget.API.SKIP",value:index});
};
//getter
//returns the current volume, in the range of [0, 100].
PB.prototype.getVolume = function(callback){
this._getter('GET_VOLUME',callback);
};
//returns current sound duration in milliseconds.
PB.prototype.getDuration = function(callback){
this._getter('GET_DURATION',callback);
};
//returns current sound position in milliseconds.
PB.prototype.getPosition = function(callback){
this._getter('GET_POSITION',callback);
};
//whether the widget is paused.
PB.prototype.isPaused = function(callback) {
this._getter('GET_PAUSED',callback);
};
//returns the list of sound objects.
PB.prototype.getSources = function(callback){
this._getter('GET_SOURCES',callback);
};
//returns current sound object.
PB.prototype.getCurrentSource = function(callback){
this._getter('GET_CURRENTSOURCE',callback);
};
//returns the index of current sound.
PB.prototype.getCurrentSourceIndex = function(callback){
this._getter('GET_CURRENTSOURCEINDEX',callback);
};
PB.prototype._post = function (msg) {
this._iframe.contentWindow.postMessage(msg, '*');
};
PB.prototype._getter = function (eventName,callback) {
var self = this;
var cb = function(event){
callback(event.data);
self.unbind('PB.Widget.API.CALLBACK.'+eventName,cb);
}
this.bind('PB.Widget.API.CALLBACK.'+eventName,cb);
this._post({action:'PB.Widget.API.'+eventName});
};
window.addEventListener('message', function (event) {
if (event.data.event && event.data.event.search('PB.Widget.') != -1
) {
var index = searchInPBs(event.source);
if (index != -1) {
var e = new Event(event.data.event);
e.data = event.data.data;
pbs[index]._iframe.dispatchEvent(e);
}
}
});
Это использованный фрейм:
<iframe id="multi_iframe" frameborder="0" scrolling="no" allowfullscreen src="https://www.podbean.com/media/player/multi? playlist=http%3A%2F%2Fplaylist.podbean.com%2F4127923%2Fplaylist_multi.xml&vjs=1&kdsowie31j4k1jlf913=c97955e82971d7fb3b4f8fde2ceb3799e87bdaf9&size=400&skin=13&auto=0&share=1&fonts=Helvetica&download=1&rtl=0" width="100%" height="530"></iframe>
Я пытался изменить это с помощью Javascript, но он не работает так, как мне кажется.
var widget = new PB('#multi_iframe');
var ifrm = document.getElementById('multi_iframe');
var win = ifrm.contentWindow;
var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
var form = doc.getElementById('player');
function change() {var iframe = widget.form.getElementsByTagName('a')[0].style.height = "600px"};
Мне просто нужен элемент внутри id id эпизода, который находится в div id заголовка, для изменения высоты стиля.