0

A.html

<div class="X"></div>
<div class="Y"></div>

B.html

<iframe scrolling="no" src="A.html">

When user visits A.html set div Y to display: none

When user visits B.html set div X to display: none

Maverickk
  • 33
  • 4
  • On `a.html` add `` and on `b.html` add `` – Alive to die - Anant Nov 04 '17 at 05:49
  • It's not easy to access the contents of an iframe. This has been answered many ways. Check this page, plus the links: https://stackoverflow.com/questions/36512542/edit-css-of-elements-within-iframe – wazz Nov 04 '17 at 06:31

3 Answers3

1

Just Use this script in A.html i hope u'll get your desire result !

<script type="text/javascript">
    $(document).ready(function () {
        var path = window.location.pathname;
        var ref = document.referrer;
       if (path == '/A.html' && ref!='')
        {
            $('[class="Y"]').css('display', 'none');
        }
        else {
            $('[class="X"]').css('display', 'none');
        }

    });
</script>
Eshu
  • 185
  • 6
  • 1
    Sorry, doesn't work. You can't simply access the contents of the iframe like that. – wazz Nov 04 '17 at 06:30
  • Still not working here but i reversed my downvote. it works for OP. not sure what's happening here. – wazz Nov 04 '17 at 07:16
0

Someone posted the answer and it worked. But for some reason, the original answer was deleted.

$(document).ready(function () {
        var path = window.location.href;
        if(path=='http://www.example.com/A.html')
        {
            $('[class="Y"]').css('display', 'none');
        }
        else {
            $('[class="X"]').css('display', 'none');
        }

    });
Maverickk
  • 33
  • 4
0

you just need to add name property in your iframe ex.

< iframe scrolling="no" src="A.html" name="Ahtml" >

then access using window.document.Ahtml.document (iframe has different document object)

mark
  • 44
  • 2