如何实现父网页向子网页传递变量值？附影院选座示例

Hey Darren, great start on your cinema booking project! Let's fix your current code first, then show you two easy ways to pass the status variable to your confirm.html popup—you don't even need PHP for this simple demo. We'll stick to vanilla JavaScript since that's what you're using now.

First: Fix the Bugs in Your Original Code #

Your current script has a few syntax/logic issues that will break functionality:

1. The onclick handlers need parentheses: onclick="press_button()" and onclick="confirmBooking()" (renamed to avoid conflict with a built-in browser function)
2. The else block is missing curly braces, so status=false runs every time (even when the button is "on")
3. The confirm() function isn't closed with a }
4. You should initialize status with a default value (like false)

Here's the corrected main page code:

<html>
<body>
  The on/off button:
  <button onclick="press_button()"><img id="button" src="on.png" style="width:100px"></button>
  <BR>
  The button that opens a new webpage:
  <button onclick="confirmBooking()"> Confirm</button>

  <script>
    let i = 0;
    let status = false; // Default to "off"

    function press_button() {
      i++;
      if (i % 2 === 1) {
        document.getElementById('button').src = 'off.png';
        status = true;
      } else {
        document.getElementById('button').src = 'on.png';
        status = false;
      }
    }

    function confirmBooking() {
      // We'll add the logic to pass status here next
    }
  </script>
</body>
</html>

Method 1: Pass Status via URL Query Parameters #

This is the most reliable method (works even if the popup loses access to the parent window). We'll append the status value to the confirm.html URL, then read it in the popup.

Step 1: Update the confirmBooking() function in your main page #

function confirmBooking() {
  // Append status as a query parameter
  window.open(`confirm.html?status=${status}`);
}

Step 2: Create confirm.html to read the parameter #

Add this code to confirm.html to fetch the status and display the right text:

<html>
<body>
  <h2>Booking Confirmation</h2>
  <p id="statusText"></p>

  <script>
    // Get the query parameters from the URL
    const urlParams = new URLSearchParams(window.location.search);
    const isOn = urlParams.get('status') === 'true';

    // Display the corresponding text
    const statusText = document.getElementById('statusText');
    if (isOn) {
      statusText.textContent = 'The switch is ON! Your selected seats will be reserved.';
    } else {
      statusText.textContent = 'The switch is OFF! No seats are selected.';
    }
  </script>
</body>
</html>

Method 2: Access Parent Window's Variable Directly #

If your popup and main page are hosted on the same domain (which they are, since you're working locally), you can directly access the parent window's status variable using window.opener.

Step 1: Update confirmBooking() in the main page #

No changes needed here—just open the popup normally:

function confirmBooking() {
  window.open('confirm.html');
}

Step 2: Update confirm.html to read from the parent #

<html>
<body>
  <h2>Booking Confirmation</h2>
  <p id="statusText"></p>

  <script>
    // Wait for the popup to load, then access the parent's status variable
    window.onload = function() {
      const isOn = window.opener.status;
      const statusText = document.getElementById('statusText');
      
      if (isOn) {
        statusText.textContent = 'The switch is ON! Your selected seats will be reserved.';
      } else {
        statusText.textContent = 'The switch is OFF! No seats are selected.';
      }
    };
  </script>
</body>
</html>

When Would You Need PHP? #

You don't need PHP for this demo, but if you want to save the booking information to a database (so it persists after the user closes the browser), you'd use PHP to handle form submissions. For example:

• Collect the selected seats and payment info in a form
• Submit it to a PHP script using fetch() or a form submit
• The PHP script would save the data to a database (like MySQL)

But for now, the JavaScript methods above are perfect for your demo.

内容的提问来源于stack exchange，提问作者Darren Wong