Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    JavaScript to hide DIV Class in iframe

    Thank you in-advance for your help.
    I'm having an issue trying to hide a div class that is being loading in an iframe. I'm trying to hide the DIV Class ss-footer and I think the code below should do it but it is not. The ss-footer is not in the code because it is being generated through the iframe.
    I would greatly appreciate any help.
    Code:
    <div id="content">
    <!-- box-container -->
    <div class="box-container">
    <div class="holder">
    <div class="frame">
    <iframe width="760" height="1231" frameborder="0" marginwidth="0" marginheight="0" src="https://*********">Loading...
    </iframe> 
    <script language="javascript"> 
    var ele = document.getElementsByClassName('ss-footer');
    ele.style.display = "block";
    </script>
    </div>
    </div>
    </div>
    </div>

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    getElementsByClassName returns a collection (even if there is only one item in that collection) which needs to be accessed by array methods.

    So you would be better off trying something like this, I think:

    Code:
    var ele = document.getElementsByClassName('ss-footer')[0];
    ele.style.display = "block";

  • #3
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you very much for the quick reply, I've tried as you suggested and it is still not working, any other suggestions?
    Code:
    <div id="content">
    <!-- box-container -->
    <div class="box-container">
    <div class="holder">
    <div class="frame">
    <iframe width="760" height="1231" frameborder="0" src="https://****" marginheight="0" marginwidth="0">Loading...</iframe>
    <script language="javascript"> 
    var ele = document.getElementsByClassName('ss-footer')[0];
    ele.style.display = "block";
    </script>
    </div>
    </div>
    </div>
    </div>

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    it's quite likely that your div is getting loaded after the javascript has run, which will render it meaningless. An iframe has an onload event which you could use to fire a function that would hide it once it exists.

    or you could try using css just to hide it from the outset.

    Code:
    <style>
    .ss-footer{display:none}
    </style>
    which reminds me, why if you are trying to hide it are you doing:
    Code:
    ele.style.display = "block";
    ?

  • #5
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you very much for your continued help.
    I am very sorry, I am very much a noob when it comes to JavaScript. I got mixed up, I thought block meant to block the text.

    I tried the CSS solution, but I couldn't get it to work. I think this might be because the iFrame is getting it's own CSS. (Just an hunch, I'm completly open for correction)

    I tried creating an on load event but it doesn't seem to be working either. I hate to keep bothering you but I would appreciate any thoughts on why it still isn't working. Thank you!
    Code:
    <div id="content">
    <!-- box-container -->
    <div class="box-container">
    <div class="holder">
    <div class="frame">
    <iframe width="760" height="1231" frameborder="0" src="https://*****" marginheight="0" marginwidth="0" onload="load()">Loading... </iframe>
    <script language="javascript"> 
    function load()
    {
    var ele = document.getElementsByClassName('ss-footer')[0];
    ele.style.display = "none";
    }
    </script>
    </div>
    </div>
    </div>
    </div>

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    ooops, sorry I forgot that it was an iframe - if it is not your page inside the iframe there is little you can do. If the footer is at the bottom (as its name would imply) you could try the clip property...
    https://developer.mozilla.org/en-US/docs/CSS/clip

  • Users who have thanked xelawho for this post:

    kucster (01-24-2013)

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,947
    Thanks
    79
    Thanked 4,424 Times in 4,389 Posts
    Clearly there is *NOTHING* you can do if the contents of the <iframe> are not coming from the *SAME SITE* and the *SAME SECURITY LEVEL* as the main page.

    I see that the URL for the <iframe> starts with "https://".

    Let's pretend the full URL is something like "https://www.sitex.com/page32.php"

    That means that, in order for you to be able to use JavaScript to affect it *AT ALL*, the URL of the main page (the one containing the <iframe> *MUST* be
    "https://www.sitex.com/...and only this part can differ..."

    Sorry, but those are the rules. It is called "cross site scripting" and is disallowed by all browsers.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    kucster (01-24-2013)

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,947
    Thanks
    79
    Thanked 4,424 Times in 4,389 Posts
    Quote Originally Posted by xelawho View Post
    ooops, sorry I forgot that it was an iframe - if it is not your page inside the iframe there is little you can do. If the footer is at the bottom (as its name would imply) you could try the clip property...
    Ummm...Xelawho, I point you to this statement in his first post:
    The ss-footer is not in the code because it is being generated through the iframe.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you very much for your help, I wasn't aware cross site scripting extended to iFrames.
    I will just have to live with the footer coming from the iFrame.

    Again thank you very much for your help!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •