<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=10">
<title></title>

</head>
<body onload="abc();">
<iframe width="20%" height="500px" src="${pageContext.request.contextPath}/cw/mainTree.do" name="mainTree" frameborder="0" scrolling="yes" style="float: left;"></iframe>
<iframe width="80%" height="500px" src="${uploadPath }" name="contentIFrame" id="contentIFrame" frameborder="0" scrolling="yes" style="float: right;"></iframe>

</body>
<script>
function abc(){
timer = setInterval('addListener()',1000)
}
function addListener(){
    cpWindow = window.frames["contentIFrame"];
    if(cpWindow.cpAPIEventEmitter){
        cpWindow.cpAPIEventEmitter.addEventListener("CPAPI_MOVIEPAUSE",function(a,b,c,d){
                            alert(7);
                            });
        clearInterval(timer);
    }
}
</script>
</html>

触发事件，脱离iframei显示的页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!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>

<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>jQuery treeview</title>
    
    <link rel="stylesheet" href="/courseware-tool/resources/css/jquery.treeview.css" />
    <!-- <link rel="stylesheet" href="../red-treeview.css" /> -->
    <link rel="stylesheet" href="/courseware-tool/resources/css/screen.css" />
    <script src="/courseware-tool/resources/js/jquery.js" type="text/javascript"></script>
    <script src="/courseware-tool/resources/js/jquery.cookie.js" type="text/javascript"></script>
    <script src="/courseware-tool/resources/js/jquery.treeview.js" type="text/javascript"></script>
    
    <script type="text/javascript">
    $(document).ready(function(){
        $("#browser").treeview({
            toggle: function() {
                console.log("%s was toggled.", $(this).find(">span").text());
            }
        });
    });
    function playCw(obj){
        window.parent.location.href="${pageContext.request.contextPath}/cw/playCw.do?cwId="+obj;
    }
    </script>
    </head>
    <body>
    
    <h1 id="banner"><a href="javascript:void(0)">课程播放</a></h1>
    <div id="main">
    <ul id="browser" class="filetree treeview-famfamfam">
        <li><span class="folder">课程名称</span>
            <ul>
            <c:if test="${not empty list }">
                <c:forEach items="${list }" var="list">
                    <li><span class="folder" onclick="playCw('${list.cwId}')">${list.cwName }</span>
                        <ul>
                            <c:if test="${not empty list.cwInfo }">
                                <c:forEach items="${list.cwInfo }" var="list">
                                    <li><span class="file" onclick="playCw('${list.cwId}')">${list.cwName }</span></li>
                                    <c:if test="${not empty list.cwInfo }">
                                        <c:import url="mainTreeContent.jsp" />
                                    </c:if>
                                </c:forEach>
                            </c:if>
                        </ul>
                    </li>
                </c:forEach>
            </c:if>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

重点解析：

window.parent.location.href="${pageContext.request.contextPath}/cw/playCw.do?cwId="+obj;

当前iframe的父框架显示内容

window.parent.contentIFrame.location.href="${pageContext.request.contextPath}/cw/playCw.do?cwId="+obj";

window.parent取父框架显示

window.parent.contentIFrame取子框架显示

相关文章