jquery .html 메서드를 사용하여 전체 웹 페이지를로드하는 방법은 무엇입니까?

내 웹 페이지에 jquery 스크립트가 포함되어 있습니다. jquery 스크립트는 막대를 클릭하면 표시 줄을 확장하고 jquery .html 메서드를 통해 HTML 내용을로드합니다. 이 방법으로 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>

expandable jquery window

, 나는 확장 된 창에 전체 iframe이로드 싶습니다. 그러나, 나는 JavaScript 코드 내에서 iframe을 포맷하는 것이 잘 작동하지 않는다고 생각했다. (가스켓 및 마진은 포착되지 않습니다.) Palpably, $ (이) .html 중에서 ('processmap_shell.html')가 작동하지 않습니다

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

. 당신은 어떻게 window_shell.html 페이지를로드 할 수 있었는지 알고 싶습니다. 따라서 main.css를보다 쉽게 참조 할 수 있습니까?

출처

2016-11-09 MisterTuna

.load()에 의해 html 코드를 얻을 수 있습니다.

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

출처

2016-11-09 16:28:58 Tinsten

아마도 가장 효과적인 방법 일 것입니다. – Tinsten

jquery .html 메서드를 사용하여 전체 웹 페이지를로드하는 방법은 무엇입니까?

답변

관련 문제