1. Preface
My page uses an iframe embedded in the pop-up window of EasyUI.
First: The parent window opens the child window. It is an iframe child page with new user information. After clicking to save, the child window iframe calls the function closeAddWindow() method of the parent window to let the parent window close the new page;
Second: The parent window opens an iframe child window that sets user permissions. First, open this child window and load all the permissions in the database table. Then the child window needs to splice the loaded permission information to html. Append to a table with the ID <table ></table>. There is a problem here that the parent window cannot append html to the table after opening the child window to load all permissions. This reason is very simple, because the parent window calls the child window to load all permissions and does not find the table element because the child page has not been fully loaded. This situation is also introduced here. Register an onload event for the iframe and call the append method after the load is completed.
Okay, let’s see more examples! ! ~~~~~~(*^__^*) Hehe...
2. Iframe child parent window method call
2.1 Syntax usage
1. Embed iframe in the parent window
<iframe id='myFrame' name="myFrame" src="" width='100%' height='100%' frameborder='0'></iframe>
2. Parent window calls child window method
();
3. The child window calls the parent window method
();
4. How to complete the iframe loading of a compatible browser
if () {
("onload", function () {
alert("IE-compliant loading method");
});
} else {
= function () {
alert("Compatible with other browser loading methods");
};
}
2.2 Syntax Code
<!DOCTYPE html>
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<div>I'm the parent window content</div>
<div><input type="button" value="Calling child window method" /></div>
<br />
<br />
<br />
<iframe id='myFrame' name="myFrame" src="" width='100%' height='100%' frameborder='0'></iframe>
<script type="text/javascript">
("btnFather").onclick=function () {
();
}
function fatherMethod() {
alert("Parent window method!");
}
if () {
("onload", function () {
alert("IE-compliant loading method");
});
} else {
= function () {
alert("Compatible with other browser loading methods");
};
}
</script>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<div style="border:1px solid red;"> I'm a subform content</div>
<div > <input type="button" value="Calling parent window method" /></div>
<script type="text/javascript">
("btnSon").onclick = function () {
();
}
function sonMethod() {
alert("Sub-window method!");
}
</script>
</body>
</html>
3. Under what circumstances can I use or
The easyi framework front-end framework is used here
<div title="Set user role" class="easyui-window" closed="true" collapsible="false" minimizable="false" maximizable="false" style="width: 140px; height: 250px; padding: 5px;">
</div>
<div > <input type="button" value="Set user role" /></div>
<script type="text/javascript">
$("#btn").click(function () {
showSetUserRoleWindow();
});
//Set user role function showSetUserRoleWindow() {
var getSelections = $("#tt").datagrid("getSelections");
if ( > 1 || == 0) {
$.("Error prompt", "Please select a row of data!", "error");
return false;
}
var data = getSelections[0]; //Get all json data in selected row //if ($("#divRoleUsers #iframe").length != 0) {
// $("#divRoleUsers #iframe").remove();
//}
// $('#divRoleUsers').append("<iframe id='iframe' name='iframe' src='RoleUsers_Update.aspx?UserID=" + + "' width='100%' height='100%' frameborder='0'></iframe>");
//Wrong approach! : The above src='RoleUsers_Update.aspx?UserID=" + + "' Here we splice the src of the parameter iframe, //Then go through the child window ("iframe").getAttribute("src");//Get the src of the parent form iframe. I found that according to the value of the UserID that cannot be obtained, it is null. It is also due to the loading order issue, which leads me to register the onload event for the iframe before I can get the results I need //if () {
// ("onload", function () {
// alert("Local iframe is now loaded.");
// ();
// });
//} else {
// = function () {
// alert("Local iframe is now loaded.");
// ();
// };
//}
if ($("#divRoleUsers #myframe").length != 0) { //This step is necessary!!! Because if you don't add this sentence, the onload binding event is only executed once, and I need to call the child window method every time the iframe is loaded! $("#divRoleUsers #myframe").remove();
}
$('#divRoleUsers').append("<iframe id='myframe' name='myframe' src='RoleUsers_Update.aspx' width='100%' height='100%' frameborder='0'></iframe>");
if () {
("onload", function () {
();
();
});
} else {
= function () {
(); //Calling the method in the child window iframe to load all role checkboxes (); //Then pass the user ID to the child window, and set the checkbox to the roles owned by the user to select the checkbox for the user. };
}
$('#divRoleUsers').window('open');
}
</script>
4. Let's summarize a few key points
When calling parent-child window methods, pay attention to the order of loading to get the desired result. When encountering problems, use alter() tests or browser developer tools to monitor it.
The above content is the method and precautions for calling JS in child parent-class windows in iframe in this article. I hope everyone likes it.