如何禁用查詢影響整個html頁面？

Question

我正在嘗試將HTML頁面加載到其他HTML頁面中。 我已經使用了參考：在不使用iFrame的情況下將HTML頁面嵌入另一個HTML頁面

我有一個html頁面say（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，則可以將scoped屬性用於樣式塊。
```
 <div> <style scoped> ... </style> </div> 
```
上述樣式塊中的css不會影響封閉div之外的任何內容。 在您的情況下，您可能必須通過使所有樣式都成為作用域來預處理要加載的頁面。 有關更多信息，請參閱使用范圍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 個解決方案

解決方案1
0 2014-08-13 07:35:34

如何禁用查詢影響整個html頁面？

問題描述

1 個解決方案

解決方案1 0 2014-08-13 07:35:34

解決方案1
0 2014-08-13 07:35:34