How to get values from the parent page in layui pop-up layer?

2 years ago
Isabella Edwards
2 minutes

There are several ways to retrieve the value of the parent page in a pop-up layer.

  1. Using localStorage:
    Store the value that needs to be passed in the parent page’s localStorage, and then in the pop-up layer, use window.parent.localStorage.getItem() method to retrieve the value from the parent page.

Parent page:

localStorage.setItem('data', '父页面的值');

Popup:

var data = window.parent.localStorage.getItem('data');
console.log(data); // 输出：父页面的值
  1. Passing parameters using URL:
    When opening a pop-up window, pass the required values as URL parameters to the URL of the pop-up window, and then use window.location.search in the pop-up window to retrieve the URL parameters.

Parent page

var data = '父页面的值';
window.open('popup.html?data=' + encodeURIComponent(data));

Popup layer (popup.html):

var urlParams = new URLSearchParams(window.location.search);
var data = urlParams.get('data');
console.log(decodeURIComponent(data)); // 输出：父页面的值
  1. To access the parent window from a pop-up window, use window.opener to retrieve the parent’s window object, and then use methods like window.opener.document.getElementById() to access the parent’s element values.

Parent page:

<input type="text" id="data" value="父页面的值">

Pop-up layer:

var data = window.opener.document.getElementById('data').value;
console.log(data); // 输出：父页面的值

Here are some common methods for obtaining values from the parent page. Choose the one that best suits your needs based on your specific situation.

bannerAds