javascript - 编辑 iframe 内子 div 中的锚元素

Question

我的页面上有一个 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：

<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&amp;vjs=1&amp;kdsowie31j4k1jlf913=c97955e82971d7fb3b4f8fde2ceb3799e87bdaf9&amp;size=400&amp;skin=13&amp;auto=0&amp;share=1&amp;fonts=Helvetica&amp;download=1&amp;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"};

我只需要在标题的 div id 中的 episode 的 div id 中的 a 元素来更改样式高度。

标签： javascriptjqueryhtmliframe