如何实现iframe向子iframe传递变量？点击按钮不丢失变量求助

Hey there, fellow JS newbie! Let's break down your problem and fix it step by step. The core issue here is that cross-iframe communication doesn't work directly—you need to use the parent page as a middleman, since each iframe runs in its own isolated context. Plus, we'll make sure your variables stick around when you click that "insert ticket" button.

1. Quick Primer on Iframe Communication Rules #

• First, confirm all your pages are running on the same origin (same domain, protocol, and port—local localhost works perfectly here). Cross-origin communication has extra security hoops, but we don't need to deal with that right now.
• Iframe A (iframesrc.php) can't send variables directly to Iframe B (iframesrc2.php). Instead, they have to talk through the parent page (index.php), which acts as a shared hub.

2. Modified Code to Fix Your Issue #

Below are updated versions of your three files with key changes marked:

index.php (Parent Page: The Communication Hub) #

This page stores shared variables, forwards messages between iframes, and ensures your AJAX submit doesn't wipe out data.

<!DOCTYPE html>
<html>
<head>
    <title>Parent Page</title>
    <script>
        // Store shared variables globally in the parent context
        let sharedVars = {};

        // Listen for messages from child iframes
        window.addEventListener('message', function(event) {
            // Validate origin (critical for security—lock this down in production!)
            if (event.origin !== window.location.origin) return;

            switch(event.data.type) {
                case 'saveVar':
                    // Save variable from iframe1 and sync to iframe2
                    sharedVars[event.data.key] = event.data.value;
                    document.getElementById('iframe2').contentWindow.postMessage({
                        type: 'updateVar',
                        key: event.data.key,
                        value: event.data.value
                    }, window.location.origin);
                    break;
                case 'requestVars':
                    // Send all stored variables to iframe2 when it loads
                    event.source.postMessage({
                        type: 'sendAllVars',
                        data: sharedVars
                    }, window.location.origin);
                    break;
            }
        });

        // Handle AJAX submit without page refresh
        function submitTicket(e) {
            e.preventDefault(); // Stop default form submit (no page reload!)
            
            // Your existing AJAX logic here—example included
            const xhr = new XMLHttpRequest();
            xhr.open('POST', 'submit-ticket.php', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            
            xhr.onload = function() {
                if (xhr.status === 200) {
                    console.log('Ticket submitted!');
                    // Optional: Update variables here after success
                }
            };

            // Attach shared variables to your form data if needed
            const formData = new FormData(document.getElementById('ticketForm'));
            Object.keys(sharedVars).forEach(key => {
                formData.append(key, sharedVars[key]);
            });
            
            xhr.send(new URLSearchParams(formData));
        }
    </script>
</head>
<body>
    <!-- Form with submit handler to prevent refresh -->
    <form id="ticketForm" onsubmit="submitTicket(event)">
        <button type="submit">insert ticket</button>
    </form>

    <!-- Iframe 1 -->
    <iframe id="iframe1" src="iframesrc.php" width="400" height="300"></iframe>
    <!-- Iframe 2 -->
    <iframe id="iframe2" src="iframesrc2.php" width="400" height="300"></iframe>
</body>
</html>

iframesrc.php (First Iframe: Send Variables to Parent) #

This iframe grabs variables from the parent and sends them to the hub for syncing to iframe2.

<!DOCTYPE html>
<html>
<head>
    <title>Iframe 1</title>
    <script>
        window.onload = function() {
            // Grab your parent variable (replace with your actual variable name)
            const parentVariable = window.parent.someParentVar;
            
            // Display it in iframe1
            document.getElementById('parentVarDisplay').textContent = parentVariable;
            
            // Send it to the parent page to sync with iframe2
            window.parent.postMessage({
                type: 'saveVar',
                key: 'someParentVar',
                value: parentVariable
            }, window.parent.location.origin);
        };

        // Optional: Send a custom variable from iframe1 to iframe2
        function sendMyCustomVar() {
            const myVar = "Hello from Iframe 1!";
            window.parent.postMessage({
                type: 'saveVar',
                key: 'iframe1CustomVar',
                value: myVar
            }, window.parent.location.origin);
        }
    </script>
</head>
<body>
    <p>Parent variable received: <span id="parentVarDisplay"></span></p>
    <button onclick="sendMyCustomVar()">Send my custom var to Iframe 2</button>
</body>
</html>

iframesrc2.php (Second Iframe: Receive Synced Variables) #

This iframe requests variables from the parent on load and listens for updates.

<!DOCTYPE html>
<html>
<head>
    <title>Iframe 2</title>
    <script>
        window.onload = function() {
            // Ask parent for all shared variables when the page loads
            window.parent.postMessage({
                type: 'requestVars'
            }, window.parent.location.origin);
        };

        // Listen for updates from the parent
        window.addEventListener('message', function(event) {
            if (event.origin !== window.parent.location.origin) return;

            switch(event.data.type) {
                case 'updateVar':
                    // Show single variable update
                    displayVar(event.data.key, event.data.value);
                    break;
                case 'sendAllVars':
                    // Show all shared variables
                    Object.keys(event.data.data).forEach(key => {
                        displayVar(key, event.data.data[key]);
                    });
                    break;
            }
        });

        // Helper function to display variables on the page
        function displayVar(key, value) {
            const container = document.getElementById('varContainer');
            const elem = document.createElement('p');
            elem.textContent = `${key}: ${value}`;
            container.appendChild(elem);
        }
    </script>
</head>
<body>
    <p>Variables received from parent/Iframe 1:</p>
    <div id="varContainer"></div>
</body>
</html>

3. Key Fixes Explained #

• postMessage Communication: This is the safe, standard way to send data between iframes. We always validate the origin to avoid security risks.
• Parent as Hub: All variables live in the parent's sharedVars object, so any update from one iframe gets synced to the other automatically.
• No Page Refresh: Using e.preventDefault() on the form submit stops the page from reloading, which would wipe out all your in-memory variables.
• Initial Sync: Iframe2 asks the parent for variables as soon as it loads, so it doesn't miss any data that was set before it loaded.

4. How to Test #

1. Drop all three files into the same folder on your local server (XAMPP, WAMP, or even python -m http.server works).
2. Open index.php in your browser. You should see iframe1 display the parent variable.
3. Click the button in iframe1—iframe2 should show the custom variable.
4. Click "insert ticket"—check the console to confirm the AJAX works, and your variables are still present in the parent's sharedVars (use browser dev tools to inspect).

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