如何使用 jquery .html 方法加载整个网页？答案

【问题标题】：How to load an entire webpage with the jquery .html method?如何使用 jquery .html 方法加载整个网页？
【发布时间】：2016-11-09 16:14:45
【问题描述】：

我在我的网页中包含了一个 jquery 脚本，通过单击一个栏，该栏会展开并通过 jquery .html 方法加载 HTML 内容。 expandable jquery window

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

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

通过这种方法，我想将整个 iFrame 加载到展开的窗口中。但是，我认为在 JavaScript 代码中格式化 iframe 效果不佳。（不拾取填充和边距。）

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

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

显然，$(this).html('processmap_shell.html') 不起作用。你知道我怎样才能在窗口中加载页面 processmap_shell.html 从而更容易地引用 main.css 吗？

【问题讨论】：

标签： jquery iframe

【解决方案1】：

您可以通过.load()获取html代码。

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

【讨论】：

这可能是最有效的方法了。