html嵌套html解决办法（object/object）
生活随笔
收集整理的這篇文章主要介紹了
html嵌套html解决办法（object/object）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
后臺管理系統多用到了頁面嵌套頁面的場景，下面是我在工作中解決的方法，利用<object></object>的data屬性，下面試w3c的介紹：
data 屬性用于指定供對象處理的數據文件的 URL。
該屬性的值是文件的 URL，該 URL 可能是相對于文件基本 URL 的絕對 URL 或相對 URL，或者是相對于用 codebase 屬性提供的 URL 的絕對或相對 URL。
瀏覽器通過插入到文檔中的對象類型來決定數據的類型。
該屬性類似于 <img> 標簽中的 src 屬性，因為它下載的是要由包含對象進行處理的數據。當然，它們之間的差別在于，data 屬性允許包含【幾乎任何文件類型】，而不僅僅是圖像文件。
看到中文框標出來的沒，幾乎任何文件！！！就是他了。
上示例代碼：
首先我創建一個new.html文件，內容隨意：
那當然是Hello World 啦！
然后創建index.html
代碼：
<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> .top{ width: 100%; height: 40px; float: left; }; .left{ width: 200px; height: 300px; background-color: tan; float: left; } .right{ width: 400px; height: 500px; background-color: darkcyan; float: left; } </style> <body> <div class="main-container" id="main" style="width:99%"> <div class="top"> <button type="button" id="btn" >確認</button></div> <div class="left"></div> <div class="right"> 11111111111111111 </div>
</div> </body> <script src="./../jquery.min.js"></script> <script> function load_home() { $(".right").html('<object type="text/html" data="new.html" width="100%" height="100%"></object>') } $("#btn").click(function(){ load_home() }) </script> </html> 效果截圖 初始界面是這樣
?
我盟看下html結構
?
可以看到.right元素下文件內容，下面我們來點擊切換按鈕?
點擊后，.right元素內元素被替換，改變為一個完整的html文件內容。 大家可以試一試啦。?
轉載于:https://www.cnblogs.com/TLSF/p/9066276.html
總結
以上是生活随笔為你收集整理的html嵌套html解决办法（object/object）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： matlab实验数据拟合,利用Matla
- 下一篇： [Lydsy1805月赛] 对称数