iframe_javascript 스킬에서 자식 상위 클래스 창에서 JS를 호출하는 방법 및 주의사항
- WBOY원래의
- 2016-05-16 15:42:591662검색
1. 서문
마이 페이지는 iframe이 내장된 EasyUI의 팝업 창을 사용합니다.
첫 번째: 상위 창이 하위 창을 열 때 사용자 정보를 추가하는 iframe 하위 페이지입니다. 저장을 클릭하면 하위 창 iframe이 상위 창의 closeAddWindow() 메서드를 호출하여 상위 창이 닫힐 수 있도록 합니다. 새로 추가된 페이지
두 번째: 상위 창은 사용자 권한을 설정하기 위해 iframe 하위 창을 엽니다. 먼저 이 하위 창을 열면 데이터베이스 테이블의 모든 기존 권한이 로드되고 하위 창은 로드된 권한 정보를 html ID에 추가 481b26505f1e161e4c14f72858b14c10f16b1740fad44fb09bfe928bcc527e08의 경우 상위 창이 하위 창을 열고 모든 권한을 로드한 후 테이블에 html을 추가할 수 없다는 문제가 있습니다. id="tb"인 이유는 매우 간단합니다. 왜냐하면 상위 창이 하위 창을 호출하여 모든 권한 정보를 로드한 후 하위 페이지가 완전히 로드되지 않았기 때문에 테이블 요소를 찾을 수 없기 때문입니다. 여기에도 소개되어 있습니다. iframe에 대한 onload 이벤트를 등록하고 로딩이 완료될 때까지 기다린 다음 추가 메서드를 호출합니다.
자, 그럼 더 많은 예시를 살펴보겠습니다! ! ~~~~~(*^__^*) 히히...
2. iframe 하위 및 상위 창 메소드 호출
2.1 문법 사용법
1. 상위 창 삽입 iframe
bb139a1090d58af1bbd5cd7431b60cfa065276f04003e4622c4fe6b64f465b88
2. 상위 창은 하위 창 메서드를 호출합니다
myFrame.window.sonMethod();
3. 자식 창은 부모 창 메서드를 호출합니다
parent.fatherMethod();
4. 브라우저 호환 iframe 로딩 완료 방법
if (myFrame.attachEvent) {
myFrame.attachEvent("onload", function () {
alert("兼容IE加载的加载方法");
});
} else {
myFrame.onload = function () {
alert("兼容其他浏览器加载方法");
};
}
2.2 문법 코드
아버지.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<div>我是父窗口内容</div>
<div><input type="button" id="btnFather" value="调用子窗口方法" /></div>
<br />
<br />
<br />
<iframe id='myFrame' name="myFrame" src="FChild.html" width='100%' height='100%' frameborder='0'></iframe>
<script type="text/javascript">
document.getElementById("btnFather").onclick=function () {
myFrame.window.sonMethod();
}
function fatherMethod() {
alert("父窗口方法!");
}
if (myFrame.attachEvent) {
myFrame.attachEvent("onload", function () {
alert("兼容IE加载的加载方法");
});
} else {
myFrame.onload = function () {
alert("兼容其他浏览器加载方法");
};
}
</script>
</body>
</html>
FChild.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<div style="border:1px solid red;"> 我是子窗体内容</div>
<div > <input type="button" id="btnSon" value="调用父窗口方法" /></div>
<script type="text/javascript">
document.getElementById("btnSon").onclick = function () {
parent.fatherMethod();
}
function sonMethod() {
alert("子窗口方法!");
}
</script>
</body>
</html>
3. myFrame.onload 또는 myFrame.attachEvent를 사용하는 경우
여기에서는 easyui 프레임워크 프런트엔드 프레임워크가 사용됩니다
<div id="divRoleUsers" title="设置用户角色" class="easyui-window" closed="true" collapsible="false" minimizable="false" maximizable="false" style="width: 140px; height: 250px; padding: 5px;">
</div>
<div > <input type="button" id="btn" value="设置用户角色" /></div>
<script type="text/javascript">
$("#btn").click(function () {
showSetUserRoleWindow();
});
//设置用户角色
function showSetUserRoleWindow() {
var getSelections = $("#tt").datagrid("getSelections");
if (getSelections.length > 1 || getSelections.length == 0) {
$.messager.alert("错误提示", "请选中一行数据!", "error");
return false;
}
var data = getSelections[0]; //获取选中的一行所有json的数据
//if ($("#divRoleUsers #iframe").length != 0) {
// $("#divRoleUsers #iframe").remove();
//}
// $('#divRoleUsers').append("<iframe id='iframe' name='iframe' src='RoleUsers_Update.aspx?UserID=" + data.UserID + "' width='100%' height='100%' frameborder='0'></iframe>");
//错误做法！：上面src='RoleUsers_Update.aspx?UserID=" + data.UserID + "' 这里通过拼接参数iframe的src，
//然后通过子窗口 parent.document.getElementById("iframe").getAttribute("src");//获取父窗体iframe的src 发现根据获取不到UserID的值，为null，也是因为加载顺序先后的问题，导致我要用给iframe注册onload事件后才能获取到我需要的结果
//if (myframe.attachEvent) {
// myframe.attachEvent("onload", function () {
// alert("Local iframe is now loaded.");
// myframe.window.loadAllRole();
// });
//} else {
// myframe.onload = function () {
// alert("Local iframe is now loaded.");
// myframe.window.loadAllRole();
// };
//}
if ($("#divRoleUsers #myframe").length != 0) { //这一步是必须的！！！，因为不加这一句下面onload绑定事件只执行一次，我需要每次加载完iframe都调用一次子窗口的方法！
$("#divRoleUsers #myframe").remove();
}
$('#divRoleUsers').append("<iframe id='myframe' name='myframe' src='RoleUsers_Update.aspx' width='100%' height='100%' frameborder='0'></iframe>");
if (myframe.attachEvent) {
myframe.attachEvent("onload", function () {
myframe.window.loadAllRole();
myframe.window.loadUserRole(data.UserID);
});
} else {
myframe.onload = function () {
myframe.window.loadAllRole(); //调用子窗口iframe里面的方法加载所有的角色checkbox
myframe.window.loadUserRole(data.UserID); //接着传递用户ID过去给子窗口的方法，给用户拥有的角色设置checkbox选中
};
}
$('#divRoleUsers').window('open');
}
</script>
4. 몇 가지 핵심 사항을 요약해 보겠습니다
부모-자식 창 메서드를 호출할 때 원하는 결과를 얻으려면 로드 순서에 주의하세요. 문제가 발생하면 alter()를 사용하여 브라우저의 개발자 도구를 테스트하거나 모니터링할 수 있습니다.
위 내용은 이번 글에서 iframe의 하위 부모 클래스 창에서 JS를 호출하는 방법과 주의사항입니다.