Question

我有：

的index.html

和

的test.html

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

然后我的index.html样式被破坏了，这就是我想将test.html加载到index.html作为iframe的原因..

＆＃13;

<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;

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

＆＃13;

Answer 1

将html文件加载到iframe

<html>
<body>

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

</body>
</html>

Answer 2

您可以做的是在使用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结构。

我希望有所帮助：）

如何使用iframe加载html？

2 个答案: