0

I have the following HTML code with the iframe:

<body>            
    <a href="#">example 1</a>
    <div style="width:150px;">example 2</div>
    <br><br>
    <iframe align="center" width="80%" height="90%" src="test.html" frameborder="yes" scrolling="yes" name="myIframe" id="myIframe"> </iframe>
</body>

test.html

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div>TODO write content</div>
        <br>
        <div>div content</div>
    </body>
</html>

Then I have written a jQuery code to find div tags and highlight

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script lang="text/javascript">
    $(document).ready(function(){
        var iframe = $('#myIframe');

        iframe.load(function(){
            iframe.ready(function(){

                $(document).on('mouseover', 'div', function (e) {
                    $(this).addClass('highlight');
                });

                $(document).on('mouseout', 'div', function (e) {
                    $(this).removeClass('highlight');
                });

            });   // end iframe load 

        });// end iframe ready

    });

</script>

This is working in the divs outside the iframe. I need to highlight the divs which are in the inside the iframe.

ROMANIA_engineer
  • 54,432
  • 29
  • 203
  • 199
Rakhitha
  • 159
  • 1
  • 5
  • 15

1 Answers1

0

You could compact the hover functions into one neat function:

$(document).on('mouseover mouseout', 'div', function () {
    $(this).toggleClass('highlight');
});

https://jsfiddle.net/Panomosh/m5yaaygk/

Bhargav Rao
  • 50,140
  • 28
  • 121
  • 140
Josh Stevenson
  • 895
  • 5
  • 17