Question

我正在尝试将html页面加载到anothter html页面中。我用过参考： Embedding Html page inside another Html page without using iFrames

我有一个html页面说（page1.html）。现在我想将另一个页面（page2.html）的内容加载到page1.html的div元素中。但是，我可以使用jquery以基本形式完成它。现在，我的问题是，所有外部样式（javascript，css）将应用于整个page1.html文档而不是div元素本身。有没有办法将所有样式仅应用于page1.html的选定div元素而不是整个page1.html？

此外，在内页加载后加载页面需要一段时间（1-3秒）。这个延迟可以最小化吗？

代码如下所示：

<html>
  <head>
  <script src="./jquery-1.6.2.min.js"></script>
  <script>
  var current_page=1;

  function prev()
  {
    //pass the prev pageno
    if(current_page-1>0)
    {   
    location.href = "http://192.168.12.77:8000" + "?page="+(current_page-1);
    }
    else
    {   
    alert('You are viewing the first page !');
    }
  }
  function next()
  {
    //pass the next page no
    if((current_page+1)>=4)
    {
        alert("You are viewing the last page !");
    }
    else    
    {
    location.href = "http://192.168.12.77:8000" + "?page="+(current_page+1);
        alert(current_page+1);
    }   

  }
  </script>
  <body>
  <table>
  <tr>

  <td width ="150">
  <button id="prev" onclick="prev()">Previous</button>
  </td>

  <td height="800" width ="1000">
  <div id="dummy_body">

  </div>
  </td>

  <td width ="150" style="padding:00px 20px">
  <button id="prev"  onclick="next()" >Next</button>
  </td>

  </tr>
  </table>
  <script> $(function() {      
   $("#dummy_body").load(".test1.html");
  });
  </script>
  </body>

  </html>

Answer 1

AFAIK有两种方法可以解决您的问题。

如果您使用的是HTML5，则可以使用样式块的范围属性。
```
<div>
<style scoped>
    ...
</style>
</div>
```
上面样式块中的css不会影响封闭div之外的任何内容。在您的情况下，您可能必须通过使所有样式作为范围来预处理要加载的页面。有关更多信息，请参阅Saving the Day with Scoped CSS

在您的情况下，最好的方法是使用iframe。在iframe中加载页面后，其css不会影响页面的其余部分。

var iframe = document.getElementById('iframe');
var html = '<p>Hello World!</p>';
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(html);
iframe.contentWindow.document.close();

如何禁止查询影响整个html页面？

1 个答案: