How to dynamic load the document content into an iframe?

I would like to make something like this

|--------------------------|
|                A         |
|        ____________      |
|       |            |     |
|       |            |     |
|       |      B     |     |
|       |            |     |
|       |____________|     |
|                          |
|__________________________|

The B page is inside the A page, and I want to insert all the js, css, into the A page, and I want to separate the B page, and I design it to use a iFrame, and get the b page dynamically. But if I use the src in the B page iframe, the A page js, css can't control it... How can I exactly insert all the B page code inside the A page, but don't need copy&paste all the code from B page t开发者_如何学Goo A page? Thank you.

You may want to look at an AJAX solution. This way you avoid the iframe and associated complexity. On the A page you can create a div tag with a specific id. Then using AJAX you can load the content of the B page into the div tag.

The HTML that is loaded can then directly be manipulated by the code on your A page since it is essentially one page.

If you are using plain javascript then you will find all the info you need in this tutorial.

If on the other hand you wish to use jQuery then it is as simple as:

  $('#myDiv').load('B.html');

where myDiv is the ID of your div.

$('#iframeId').contents().find('html').html(yourContent);