当嵌入的谷歌日历加载时回调

Question

我正在以标准方式加载嵌入式Google日历:

<iframe id="calendar" src="https://www.google.com/calendar/embed...></iframe>

我想在使用jQuery加载事件后应用一些样式更改，例如:

$('iframe#calendar').contents().find('.blahblah').css("display", "none");

我大概需要使用间隔循环:

var interval_calendar = setInterval(function(){
    if ($('#calendar').SOMETHING) {
        clearInterval(interval_calendar);
        $('iframe#calendar').contents().find('.blahblah').css("display", "none");
    }
} ,200);

如何检查日历是否已加载?基本上，我需要SOMETHING。

谢谢。

Answer 1

Try

        var iframe = $("<iframe>", {
                "id" : "calendar",
                "src" : "https://www.google.com/calendar/embed...",
                "target" : "_top"
        })
        // `iframe` `load` `event`
        .on("load", function (e) {
            $(e.target)
            .contents()
            .find(".blablah")
            .css("display", "none");
            return false
        });
        // $(element).append($(iframe))

jsfiddle http://jsfiddle.net/guest271314/a3UL5/

Answer 2

你可以使用load来执行一个函数当你的iframe完成加载…

$("#calendar").load( function () {
    // do something once the iframe is loaded
});

Answer 3

我找不到任何好的JavaScript事件解决方案，但您可以使用您的想法:

var interval_calendar = setInterval(function(){
    if ($('#calendarTitle').html()!= "") {
        clearInterval(interval_calendar);
        alert();
    }
} ,200);

只有整个日历加载完成后，页面才会显示calendarTitle id。

另一方面，我不知道是否可以访问日历属性，因为它们是受保护的。您只能访问从主机加载的iframe内容。用alert()它工作，但如果你试图访问任何内部内容，你会得到一个SecurityError消息到控制台。