Hide an image within an iframe

Question

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 ?

that would be a bit difficult as i have some sensitive stuff there. il see if i can put something quickly. — nixgadget, Aug 05 '14 at 23:55
`iframe#contentFrame html body …` – that selector won’t match anything. You can not simply select elements that way across documents. Either pass a parameter to the iframe via URL that makes it hide the image itself, or use JavaScript. — CBroe, Aug 06 '14 at 00:01

score 2 · Accepted Answer · edited May 23 '17 at 11:52

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

Hide an image within an iframe

1 Answers1

Linked