CODEWITHSUNDEEP
javascriptjqueryhtmlcssiframe
ani_css
ani_css

Reputation: 2126

How to load html with iframe?

I have:

index.html

and

test.html

and I could load my test.html with jquery load(); function to in index.html

but then my index.html style is broken that is why I want to load my test.html into index.html as iframe..

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>index.html</h1>

<div class="item">
load test.html here with iframe
</div>

<div class="test">
I'm a test div and I want to be in index.html in `item` class
</div>

Upvotes: 0

Views: 3424

Answers (2)

lumio
lumio

Reputation: 7585

What you could do is to specify only the content you want to load when using jQuery.load like this:

$( "#result" ).load( "test.html #container" );

Then it would only load the content of #container instead of everything (including the styles which might break your layout.

If you want to change an iframe src with jQuery you could use a click event like so:

jQuery( function() {
  $( 'button' ).click( function( e ) {
    e.preventDefault();
    $( '#result' ).attr( 'src', 'test.html' );
  } )
} )

But I think it would be better to use the first approach, trying to only load the content itself, not the whole HTML structure of test.html.

I hope that helped :)

Upvotes: 1

Sunusi Mohd Inuwa
Sunusi Mohd Inuwa

Reputation: 74

to load html file into an iframe

<html>
<body>

  <iframe src="test.html">
    <p>Your browser does not support iframes.</p>
  </iframe>

</body>
</html>

Upvotes: 1

Related Questions