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.. 我还有其他几个 div，我不想通过简单地用 css 隐藏来加载它们。

Answer 1

您有重复的 ID，这假设您的 iFrame ID 是 skiptrace。

<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>