Question

我在iframe中有以下页面。此页面也可以在iframe外部访问。但我喜欢做的是在框架中隐藏徽标（id = llogo），但在直接访问框架内的页面时显示它。

<div id="content" style="border-radius: 20px;">
<iframe id="contentFrame" frameborder="0" src="/ip/changePassword.html" style="height: 496px;">
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    <html>

        <head>
        <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
        <title>Change Password</title>

        <link media="screen" type="text/css" rel="stylesheet" href="/static/css/common/style.css">   
        <link type="text/css" rel="stylesheet" href="/static/js/common/jquery/css/smoothness/jquery-ui-1.9.1.custom.css">  
        <link media="screen" type="text/css" rel="stylesheet" href="/static/css/webconsole/login.css">
        <script src="/static/js/common/jquery/jquery-1.8.2.js" type="text/javascript">
        <script src="/static/js/common/jquery/jquery-ui-1.9.1.custom.min.js" type="text/javascript">
        <script src="/static/js/common/AM.common.js" type="text/javascript">
        <script src="/static/js/common/jquery.corner.js" type="text/javascript">
        <script src="/static/js/common/jquery.boxshadow.js" type="text/javascript">
        <script src="/static/js/common/change.password.js" type="text/javascript">
        </head>

        <body>

        <div id="pagebg">

        <div id="password">

        <div id="llogo">
            <a class="logo llogo" href="javascript:void(0);">AM</a>
        </div>
        <div id="credentials"> To change your password, enter the information below </div>

        <form id="login-form" method="post" action="changePassword.html">
        <input id="input_logid" class="loginField" type="text" disabled="disabled" value="sysadmin" autocomplete="off">
        <input type="hidden" value="sysadmin" name="login" autocomplete="off">
        <input id="currentPassword" class="passwordField" type="password" autocomplete="off" placeholder="Enter your Current Password" name="currentPassword">
        <input id="newPassword" class="passwordField" type="password" autocomplete="off" placeholder="Enter your New Password" name="newPassword">
        <input id="newPasswordConfirm" class="passwordField" type="password" autocomplete="off" placeholder="Confirm New Password" name="newPasswordConfirm">
        <input type="hidden" value="" name="postbackURL" autocomplete="off">
        <input type="hidden" value="" name="changeReason" autocomplete="off">
        <input type="hidden" value="0" name="managedSysId" autocomplete="off">
        <input type="hidden" value="USR_SEC_DOMAIN" name="securityDomain" autocomplete="off">

        <div class="lrow">
        </form>
        <div id="lbuttons"> </div>
        </div>

        <div id="log-foot">

        <div id="copy">

        <div class="dsmweb-footer">
        Login to
        <a target="_blank" href="https://dsm”>DSM</a>
        to access your emails
        </div>
        <br>
        <br>
        © 2013 AM LLC Copyright 2013. All Rights Reserved.
        </div>

        </div>
        </div>
        <div style="height: 1px;"></div>
        </body>

    </html>

</iframe>
</div>

我试图通过这样做来实现这一目标，

iframe#contentFrame html body div#pagebg div#password div#llogo {
    display: none !important;
}

但这没有做任何事情。任何想法我怎么能隐藏它？

Answer 1

我认为你不能用CSS做到这一点。

但你可以试试Javascript。使用jQuery，您可以执行以下操作：

jQuery(document).load(function(){
    jQuery('div#llogo', frames['contentFrame']).hide();
});

请记住在iframe元素上设置name属性。在我的示例中，名称必须是 contentFrame ，但您可以根据需要进行设置。

请注意，iframe 中的页面必须位于父页面的同一个域中，否则由于同源策略，您无法通过javascript访问iframe内容。有关详细信息，请参阅此其他问题： jQuery/JavaScript: accessing contents of an iframe

在iframe中隐藏图片

1 个答案: