如何使用jquery .html方法加載整個網頁？

我在我的網頁中添加了一個jquery腳本，通過點擊一個欄，該欄展開並通過jquery .html方法加載HTML內容。 expandable jquery window 如何使用jquery .html方法加載整個網頁？

#processmap { 
 
\t height: 20px; 
 
\t position: fixed; 
 
\t top: 0px; 
 
\t left: 20px; 
 
\t right: 20px; 
 
    font-size: .8em; 
 
\t color: white; 
 
\t text-align: center; 
 
\t background-color: #EF7100; 
 
\t box-shadow: 0px 11px 5px -10px rgba(153,153,153,1); 
 
\t border-radius: 0 0 5px 5px; 
 
\t z-index: 999; 
 
\t font-family: 'Open Sans', sans-serif; 
 
\t padding-bottom: 2px; 
 
}

<!DOCTYPE html> 
 
<!-- Please ensure that no elements, particularly pictures, exceed 480 px width. --> 
 
<html> 
 
\t <head> 
 
\t \t <link type="text/css" rel="stylesheet" href="css/main.css"/> 
 
\t \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
\t \t <script> 
 
\t \t \t $(document).ready(function(){ 
 
\t \t \t \t $("#processmap").click(function() { 
 
\t \t \t \t \t if ($(this).height() > 20) { 
 
\t \t \t \t \t \t $(this).animate({ 
 
\t \t \t \t \t \t \t height: "20px" 
 
\t \t \t \t \t \t }, 300, 'swing', function() { 
 
\t \t \t \t \t \t \t $(this).html("Open Business Process Map"); 
 
\t \t \t \t \t \t }); 
 
\t \t \t \t \t } else { 
 
\t \t \t \t \t \t var content = 'Close this window.</br><iframe style="top: 20px; height:100%; width: 100%; margin:0; padding:0; overflow:hidden" src="processmap_project.html"></iframe>' 
 
\t \t \t \t \t \t $(this).animate({ 
 
\t \t \t \t \t \t \t height: "150px" 
 
\t \t \t \t \t \t }, 300, 'swing', function() { 
 
\t \t \t \t \t \t $(this).html(content); 
 
\t \t \t \t \t \t }); 
 
\t \t \t \t \t } 
 
\t \t \t \t }); 
 
\t \t \t }); 
 
\t \t </script> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id="processmap"> 
 
\t \t \t Open Business Process Map 
 
\t \t </div> 
 
\t \t <iframe id="art" style="height:100%; width:100%; align:top; border:none; overflow:scroll" src="https://***"></iframe> 
 
\t </body> 
 
</html>

通過這種方法，我想整個的iFrame加載到擴展窗口。不過，我認爲格式化JavaScript代碼中的iframe效果不佳。（填充和邊距沒有撿到。）

<script> 
 
\t $(document).ready(function(){ 
 
\t \t $("#processmap").click(function() { 
 
\t \t \t if ($(this).height() > 20) { 
 
\t \t \t \t $(this).animate({ 
 
\t \t \t \t \t height: "20px" 
 
\t \t \t \t }, 300, 'swing', function() { 
 
\t \t \t \t \t $(this).html("Open Business Process Map"); 
 
\t \t \t \t }); 
 
\t \t \t } else { 
 
\t \t \t \t var content = 'processmap_shell.html' 
 
\t \t \t \t $(this).animate({ 
 
\t \t \t \t \t height: "150px" 
 
\t \t \t \t }, 300, 'swing', function() { 
 
\t \t \t \t $(this).html(content); 
 
\t \t \t \t }); 
 
\t \t \t } 
 
\t \t }); 
 
\t }); 
 
</script>

<!DOCTYPE html> 
 
<!-- Please ensure that no elements, particularly pictures, exceed 480 px width. --> 
 
<html> 
 
\t <head> 
 
\t \t <link type="text/css" rel="stylesheet" href="css/main.css"/> 
 
\t </head> 
 
\t <body> 
 
\t \t Close this window.</br> 
 
\t \t <iframe id="process" src="processmap_project.html"></iframe> 
 
\t </body> 
 
</html>

顯然，$（本）的.html（ 'processmap_shell.html'）不起作用。你知道我怎樣才能在窗口中加載頁面processmap_shell.html，因此，更容易引用main.css？

來源

2016-11-09 MisterTuna

您可以通過獲取html代碼。

$(this).load('file.html');

來源

2016-11-09 16:28:58 Tinsten

這可能是最有效的方法。 – Tinsten

如何使用jquery .html方法加載整個網頁？

回答

相關問題