Working With Elements Inside An iFrame In An Html Page

Working with elements inside an iFrame in an html page when you want to have a new page load as an HTML instead of using ajax calls to load appending an html page to the existing page and using css to display it.

Step 1. in index.html page of your application including as many iframes as possible in following manner

you can replace “blank.html” by your page source(src=”example.html”).now when you expand your iframe in the developer tool to see the children element tags in the DOM tree, the first children you may see is
#document.

that is because you are using your iframe src to access a different page from your current page.
To go inside that page and play with the new page’s elements we use “.contents()” .
This method doesn’t accept any arguments and you can use this method in the following manner:

$(‘#MYFRAMEID’).contents().find(‘.my-iframe-body’).addClass(‘access-inside-iframe’);

Also if you apply css in your css file to an DOM element inside an iframe, you won’t be able to as HTML doesn’t allow you to do so.
Here also we can use .content() in the following manner:

$(‘#MYFRAMEID’).contents().find(‘.my-iframe-body’).addClass(‘access-inside-iframe’).css(‘font-weight’,’bold’);

look whether it is supported in IE or not