Question

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

显然，$（this）.html（＆＃39; processmap_shell.html＆＃39;）不起作用。您是否知道如何在窗口中加载页面processmap_shell.html，从而更容易参考main.css？

Answer 1

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

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

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

1 个答案: