javascript - 无法执行在父 jsp div 标记内调用的子 html 的 onload()

标签 javascript jquery html css jsp

下面是父jsp的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@page import="org.apache.jasper.tagplugins.jstl.core.ForEach"%>
<%@page import="java.util.Iterator"%>
<%@page import="com.sal.bean.CompanyBean"%>
<%@page import="java.util.List"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-latest.min.js"
	type="text/javascript"></script>
<script src="script.js"></script>

<script>
	/* function loadHTML(pageName) {
		//alert(pageName);
		var name = pageName + ".html";
		//alert(name);
		$('#my_div').load(name + ' #' + pageName);
		//alert("2"); */
		
		
		function loadHTML(pageName) {
			var name = pageName + ".html";
		
    $('#my_div').load(name);
}
	
</script>

</head>
<body>
	<%
		List<CompanyBean> cmpList = (List<CompanyBean>) request
				.getAttribute("CompDtl");
		Iterator itr = cmpList.iterator();
		CompanyBean cmp = (CompanyBean) itr.next();
	%>
	<div
		style="height: 100px; width: 101%; background: none repeat scroll 0 0 #80817D; margin: -15px 0px 0px -7px; border-radius: 10px;">

		<ul style="list-style-type: none;">
			<li
				style="font-size: 72px; font-family: Verdana; margin-right: 30px; float: right;"><%=cmp.getComp_nm()%></li>
		</ul>
	</div>
	<div style="margin: 0px 0px 0px -7px; border-radius: 10px">
		<div id='cssmenu'
			style="height: 100vh; width: 15%; float: left; background-color: gray;">
			<div id='cssmenu'>
				<ul>
					<li class='active'><a href='#'><span>Home</span></a></li>
					<li class='has-sub'><a href='#'><span>SETUP</span></a>
						<ul>
							<li onclick="loadHTML('Department')" id="dept"><a href='#'><span
									id="dept">DEPARTMENT</span></a></li>
							<li onclick="loadHTML('Contractor')"><a href='#'><span>CONTRACTOR</span></a></li>
							<li onclick="loadHTML('Salary_mode')" class='last'><a
								href='#'><span>SALARY MODE</span></a></li>
						</ul></li>
					
					<li class='has-sub'><a href='#'><span>About</span></a>
						<ul>
							<li><a href='#'><span>Company</span></a></li>
							<li class='last'><a href='#'><span>Contact</span></a></li>
						</ul></li>

				</ul>
			</div>
		</div>
		<div id="my_div" style="height:100vh; width:85%; float: left"></div>
	</div>
</body>
</html>

下面是加载到 id = mydiv 的父 div 标签中的子 html 代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body onload="getDeptID()">
	<div id=Department>
		<script>
			function getDeptID(){
				alert("hello");
			}
		</script>
		<form action="SalaryControl" method="post">
			<div>
				<div style="float: left;">
					<span>Department Code</span>
				</div>
				<div>
					<input type="text" id="dept_id" tabindex="-1" onFocus="this.blur()"
						value="" />
				</div>
			</div>
		</form>
	</div>
</body>
</html>

当我从主 jsp(父 jsp 页面)成功单击导航栏中的相应按钮时,子项被加载,但子 html 中的 onload() 函数未被执行。请帮助解决问题。

最佳答案

您并没有真正在此处指定您需要什么,但我认为您可以在不运行位于子页面中的函数的情况下完成此操作,而是调用回调函数中的函数。

例如:

...
<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-latest.min.js"
    type="text/javascript"></script>
<script src="script.js"></script>

<script>
        function loadHTML(pageName) {
            var name = pageName + ".html";

    $('#my_div').load(name, function() {
        //code that was in getDeptID()
        alert("hello");
     });
}
...

您可以在回调中做很多不同的事情,我相信它可以做您真正需要它做的事情。

参见 JQuery API加载函数以获取更多信息。

关于javascript - 无法执行在父 jsp div 标记内调用的子 html 的 onload(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30038733/

相关文章:

javascript - jQuery 不改变背景颜色

javascript - 无法在Formik的onSubmit中调用setState函数

jquery - 有 JQuery 1.4.2 版本吗?有了 Intellisense 了吗?

jquery - 单击缩略图 img,找到 alt 值...然后将Class 添加到具有相同 alt 值的所有图像

html - 在 Bootstrap 中导入 modal.less

当我想在 HTML 中执行 PHP 函数时,PHP 函数不起作用

javascript - 如何通过 id on live 加载特定的 php 文件以显示在悬停 div 上

javascript - 相同的 RegExp 交替返回 true 和 false。为什么?

javascript - 使用 PHP、AJAX 将数据发布到不同域不起作用

javascript - 背景大小是 innerhtml 大小