Использование jQuery для стиля iFrame

Я читал о дюжине подобных вопросов здесь и пытался все, о чем я мог думать, но я, очевидно, делаю что-то неправильно, потому что я просто не могу заставить его работать.

HTML

<iframe name="posts" id="posts" src="edit.php">

JS

$(document).ready(function() {
    $('iframe#posts').ready(function() {
        var frame = $('iframe#posts').contentDocument;
        console.log($('#adminmenu', frame));
        $('#adminmenu', frame).css('display', 'none !important');
    });
});

Консоль выводит:

[<ul id="adminmenu" style="display: none !important; ">…</ul>]

который является правильным элементом. Однако display:none никогда не применяется в браузере. Кроме того, мне показалось странным, что консоль выводит с помощью встроенного стиля, даже если он устанавливается после оператора console.log() (не уверен, что это связано или нет, но не похоже, что оно должно быть).

Кто-нибудь знает, почему это не работает?

Я также должен добавить, что в основном документе также есть <ul id="adminmenu">, но я понял, предоставив контекст iframe, который должен быть нацелен на iframe.

Ответ 1

Вы пытались использовать функцию jQuery contents() вместо contentDocument?

$("iframe#posts").contents().find("#adminmenu").hide();

Обновлено: изменено .css("display", "none !important") на просто .hide().

Ответ 2

Для iframe попробуйте использовать метод "load" вместо "ready". Кроме того, используйте 'contents()' вместо 'contentDocument', чтобы получить содержимое iframe.

$(document).ready(function() {
    $('iframe#posts').load(function() {
        var frame = $('iframe#posts').contents();
        /* other code */
    });
});