Utilisation de jQuery pour style iFrame

J'ai lu environ une douzaine de questions similaires sur ici et essayé tout ce que je pense, mais je suis évidemment faire quelque chose de mal parce que je ne peux pas le faire fonctionner.

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');
    });
});

La console est sortie:

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

qui est l'élément correct. Cependant, le display:none n'est jamais appliquée dans le navigateur. Aussi, je trouve bizarre que la console est sortie avec le style en ligne, même si elle est définie après la console.log() déclaration (je ne sais pas si c'est lié ou pas, mais ne semble pas comme il devrait l'être).

Quelqu'un a une idée de pourquoi cela ne fonctionne pas?

Je dois également ajouter que il ya une <ul id="adminmenu"> dans le document principal, mais j'ai compris par la fourniture de l'iframe contexte, il convient de cibler l'iframe.

source d'informationauteur ggutenberg

  1. 21

    Avez-vous essayé d'utiliser du jQuery contents() fonction au lieu de contentDocument?

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

    Mise à jour: modification de la .css("display", "none !important") simplement .hide().

  2. 4

    Pour un iframe, essayez de le "charger" la méthode au lieu de "prêt". Aussi, l'utilisation du contenu () "au lieu de" contentDocument afin d'obtenir le contenu de l'iframe.

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