Callback when embedded Google Calendar has loaded

问题:

I am loading an embedded Google calendar the standard way:

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

I want to apply some style changes after the load event using jQuery, e.g.:

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

I presumably need to use an interval loop:

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

How can I check that the calendar is loaded? Basically, I need the SOMETHING.

Thanks.

回答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/

回答2:

You could use load to execute a function when your iframe is done loading...

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

回答3:

I can not find any good JavaScript Event solution, but you can use your idea:

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

The calendarTitle id is shown on the page only when the whole calendar loaded.

In the other hand I don't know if you can access the calendar attributes, as they are protected. You can only access the iframe content that was loaded from your host. With an alert() it works, but if you try to access any inside content you will get a SecurityError message into console.