08，html当前窗口,框架集元素实例,顶层窗口

最新推荐文章于 2024-06-06 21:46:15 发布

bingliang514csdn

最新推荐文章于 2024-06-06 21:46:15 发布

阅读量209

点赞数

分类专栏： html网页标记语言及css样式_v2 文章标签： html 前端 servlet

本文链接：https://blog.csdn.net/bingliang514csdn/article/details/127948436

版权

html网页标记语言及css样式_v2 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

（1），顶层窗口及底层窗口

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <style type="text/css"></style>
	<link rel="stylesheet" type="text/css" href="#">
	
</head>
<body>
	
	<input type="button" value="测试1" onclick="testFun()" />
	
</body>
<script type="text/javascript">
	
	function testFun() {
		
		// 当前窗口是否底层窗口
		if(window.parent == window.self) {
			alert("是底层窗口");
		}
		
		// 是否最顶层窗口
		if(window.top != window.self) {
			alert("不是最顶层窗口，当前窗口在一个框架中");
		} else {
			alert("是最顶层窗口");
		}
		
	}
	
</script>
</html>

（2），框架集元素子窗口调用父窗口js方法及调用兄弟窗口（注意：页面都是在同一个域）

<!--indexIframeTest.jsp页面-->
<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <%
        String contextPath = request.getContextPath();
    %>
    <title>test</title>

    <script type="text/javascript">

        function testParentFun() {
            alert("这是父页面中js方法的信息提示！");
        }

    </script>

</head>
<body>

    <iframe src="<%=contextPath %>/pub/testDirectory/firTest.jsp" frameborder="1"></iframe>
    <iframe src="<%=contextPath %>/pub/testDirectory/secTest.jsp" frameborder="1"></iframe>

</body>
</html>

<!--firTest.jsp页面-->
<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <%
        String contextPath = request.getContextPath();
    %>
    <title>test</title>

    <script type="text/javascript">

        // 测试调用父页面js方法
        function testParentFun() {
            window.parent.window.testParentFun();
        }

        // 测试调用同父页面下的第二个页面js方法
        function testSecFun() {

            window.parent.frames[1].window.secFunction();
        }

    </script>

</head>
<body>

    这是子页面，的第一个页面
    <input type="button" value="测试调用父页面js方法" onclick="testParentFun()" />
    <input type="button" value="测试调用同父页面下的第二个页面js方法" onclick="testSecFun()" />

</body>
</html>

<!--secTest.jsp页面-->
<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <%
        String contextPath = request.getContextPath();
    %>
    <title>test</title>

    <script type="text/javascript">
        
        function secFunction() {

            var divInnerText = document.getElementById("divID_01").innerText;
            alert("这是第二个页面js方法，使用innerText获取层元素里内容="+ divInnerText);
        }
        
    </script>

</head>
<body>

    这是子页面，的第二个页面
    <div id="divID_01">
        这是层元素里的内容
    </div>

</body>
</html>