When the current page (parent frame or parent page) pops up a new window (subframe or child page) in the iframe layer using the layer, how to access the elements and functions of the parent page in the child page, thereby changing the page display of the parent element, giving the user a reasonable and comfortable experience.
1. () Review of the usage of important parameters of the method
content - Content
The value that can be passed in content is flexible and variable. It can not only pass in ordinary html content, but also specify the DOM, and it can also vary according to different types.
/!*
If it's a page layer
*/
({
type: 1,
content: 'Passing in any text or html' //Here the content is an ordinary String});
({
type: 1,
content: $('#id') //The content here is a DOM. Note: It is best to store the element in the outermost layer of the body, otherwise it may be affected by other relative elements.});
//Ajax get$.post('url', {}, function(str){
({
type: 1,
content: str //Note that if str is an object, then character stitching is required. });
});
/!*
in the case ofiframelayer
*/
({
type: 2,
content: '' //The content is a URL. If you don't want the iframe to scroll bar, you can also content: ['', 'no']});
/!*
in the case of用执行tipslayer
*/
({
type: 4,
content: ['content', '#id'] //The second item of the array is the adsorption element selector or DOM}); success -Successful callback method after layer pops up
When you need to execute some statements when the layer is created, you can use this callback. Success will carry two parameters, namely the current layer DOM current layer index.
({
content: 'Test callback',
success: function(layero, index){
(layero, index);
}
});yes-Confirm button callback method
This callback carries two parameters, namely the current layer index and the current layer DOM object.
({
content: 'Test callback',
yes: function(index, layero){
//do something
(index); //If the yes callback is set, it needs to be manually closed }
}); 2. Common codes for operating parent pages by js
// 1. Access the parent page element valueparent.$("#id").val();
// 2. Method of accessing parent page();//How to access the parent page
// 3. How to close the pop-up subpage windowvar index = (); //Get window index(index);//Close the pop-up subpage window
// 4. How to perform refreshing parent page operation from child page(); 3. Example of the child page changing the parent page content code
Parent page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Parent page</title>
<link rel="stylesheet" type="text/css" href="" rel="external nofollow" rel="external nofollow" >
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
</head>
<body>
<p >Example</p>
<button >View variables</button>
<button >Openiframe</button>
<script type="text/javascript">
var rel="Raw Variable";
$(function(){
$('#ne').on('click', function(){
({
type: 2,
area: ['500px', '300px'],
maxmin: true,
content: ''
});
});
$('#ne1').on('click', function(){
alert(rel);
});
});
function setRel(rel){
=rel;
}
function getRel(){
return rel;
}
</script>
</body>
</html> Subpage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Subpage</title>
<link rel="stylesheet" type="text/css" href="" rel="external nofollow" rel="external nofollow" >
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
</head>
<body>
<p><input ><button >Change parent class element</button></p>
<button >closureiframe</button>
<script>
$(function(){
var str=;
$("#name").val(('?')[1]);
$('#new').on('click', function(){
var index = ();
("Subclass value transmission");
(index);
});
$('#new1').on('click', function(){
parent.$('#parentIframe').text($("#name").val());
});
});
</script>
</body>
</html> Notice:
1. Change the ‘’ in the parent page to your own child page path address
2. Official download
3. The reference to the jquery library must be before
This is the article about pop-up layer (subpage) changing the content of the parent page (accessing elements and functions). For more related layer child pages, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!