如何使用iframe加载html?

时间:2017-06-08 13:16:50

标签: javascript jquery html css iframe

我有:

  

的index.html

  

的test.html

我可以用jquery load()加载我的test.html;功能到index.html

然后我的index.html样式被破坏了,这就是我想将test.html加载到index.html作为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>
&#13;
&#13;
&#13;

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

2 个答案:

答案 0 :(得分:1)

将html文件加载到iframe

<html>
<body>

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

</body>
</html>

答案 1 :(得分:1)

您可以做的是在使用jQuery.load时仅指定要加载的内容:

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

然后它只会加载#container的内容而不是所有内容(包括可能会破坏你的布局的样式。

如果你想用jQuery更改iframe src,你可以使用像这样的点击事件:

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

但我认为最好使用第一种方法,尝试仅加载内容本身,而不是test.html的整个HTML结构。

我希望有所帮助:)