jquery - 異なるCSSスタイルのページがあり、iframe内に独自のCSSスタイルがあるページにロードしたい場合

Question

jqueryを介してロードするときにそのiframeのcssを変更することは可能ですか？

これは私が得たものです：

<script type='text/javascript'>
        $(document).ready(function(){
            $("div#skiptrace div.global-header").css('display', 'none');
            });
    </script>
   <div id="skiptrace"><iframe name="my_iframe" src="" id="skiptrace"></iframe></div>
</div> 

div.global-headerをdisplay：noneに変更しようとしています。cssで非表示にするだけではロードしたくない他のdivがいくつかあります。

Answer 1

IDが重複しています。これは、iFrameIDがスキップトレースであることを前提としています。

<script language="javascript">
$(document).ready( function() {
    $("#skiptrace").load( function() {
        $(this).contents().find("div.global-header").css('display', 'none');
    });
});
</script>

<div id="skiptraceContainer">
    <iframe name="my_iframe" src="" id="skiptrace"></iframe>
</div>

Answer 2

IFrameのcontent（）。find（selector）を使用できるはずです。まず、divとiframeのIDを修正する必要があります。ただし、iframeのIDはiskiptraceであると想定します。

<div id="skiptrace">
    <iframe name="my_iframe" src="" id="iskiptrace"></iframe>
</div>
<script type="text/javascript">
    function loadPage(url)
    {
        $("#iskiptrace").attr('src', url);
        $("#iskiptrace").load( function()
        {
            $("#iskiptrace").content().find(".hidable").css('display', 'none');
        });
    }

    loadPage("iframeIndex.html");
</script>