如何使用iframe加载html？

Question

我有：

index.html

和

test.html

我可以用jquery load（）;加载我的test.html ; 函数在index.html

但是后来我的index.html样式被破坏了，这就是为什么我要将test.html作为iframe加载到index.html中的原因。

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

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，则可以使用click事件，如下所示：

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

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

希望对您有所帮助：）

如何使用iframe加载html？

问题描述

2 个解决方案

解决方案1
1 2017-06-08 13:21:48

解决方案2
1 2017-06-08 13:24:01

如何使用iframe加载html？

问题描述

2 个解决方案

解决方案1 1 2017-06-08 13:21:48

解决方案2 1 2017-06-08 13:24:01

解决方案1
1 2017-06-08 13:21:48

解决方案2
1 2017-06-08 13:24:01