Hide an image within an iframe

问题

I have the following page in an iframe. This page can be accessed outside the iframe as well. But what Id like to do is hide the logo (id=llogo) in the frame but display it when accessing the page inside the frame directly.

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

I tried to achieve this by doing,

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

But this didnt do anything. Any ideas how can I hide it ?

回答1:

I think that you cannot do it with CSS.

But you can try with Javascript. Using jQuery, you can do something like this:

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

Remember to set the name attribute on the iframe element. In my example, the name must be contentFrame, but you can set it as you like.

Beware that the page in the iframe must be on the same domain of the parent page, otherwise you can't access the iframe content through javascript, due to the Same Origin Policy. See this other question for more details: jQuery/JavaScript: accessing contents of an iframe

来源：https://stackoverflow.com/questions/25150062/hide-an-image-within-an-iframe

标签

html

css

iframe