基于Angular 4/5实现同域iframe间的通信方案问询

Great question! When working with same-origin iframes, you don’t have to rely solely on window.postMessage—there are several more direct, simpler approaches since the browser treats your parent page and iframe as part of the same trusted context. Let’s walk through the most practical options:

1. Direct Window Object Access #

Since you’re on the same origin, the parent page can directly access the iframe’s window object, and vice versa. This is the most straightforward method for real-time data sharing and modification.

Parent → Iframe Example: #

Wait for the iframe to finish loading first, then pass or modify data directly:

// Parent page
const myIframe = document.getElementById('userComponentIframe');
myIframe.onload = () => {
  // Access the iframe's window and set user data
  myIframe.contentWindow.userSession = {
    userId: 456,
    username: 'jane_doe',
    isLoggedIn: true
  };

  // You can also call functions in the iframe
  myIframe.contentWindow.updateUserUI();
};

Iframe → Parent Example: #

The iframe can modify the parent’s data directly using window.parent:

// Inside the iframe
// Update user data in the parent
window.parent.userSession.isLoggedIn = false;

// Call a parent function to reflect changes
window.parent.handleUserLogout();

2. Shared Global Variables #

You can define a shared global object in either the parent or iframe that both contexts can access and modify. This works because same-origin contexts can reach each other’s global scope.

// Parent page: Define a shared global
window.sharedAppState = {
  currentUser: null,
  theme: 'light'
};

// Inside iframe: Modify the shared state
window.parent.sharedAppState.currentUser = { id: 789, name: 'Bob' };

// Parent page: Read the updated state later
console.log(window.sharedAppState.currentUser); // { id: 789, name: 'Bob' }

3. Shared Storage (LocalStorage/SessionStorage) #

Same-origin pages share access to localStorage and sessionStorage. You can use these to store serialized data, and even listen for changes with the storage event to react automatically when data is updated.

Parent Page: Save User Data #

const userData = { id: 123, email: 'user@example.com' };
localStorage.setItem('activeUser', JSON.stringify(userData));

Iframe: Read & Modify Data #

// Read initial data
const activeUser = JSON.parse(localStorage.getItem('activeUser'));

// Modify and save back
activeUser.email = 'updated@example.com';
localStorage.setItem('activeUser', JSON.stringify(activeUser));

// Listen for changes from parent/other contexts
window.addEventListener('storage', (e) => {
  if (e.key === 'activeUser') {
    const updatedUser = JSON.parse(e.newValue);
    console.log('User data updated:', updatedUser);
    // Update your iframe UI here
  }
});

Note: Keep in mind that localStorage persists across browser sessions, while sessionStorage is limited to the current tab. Also, all same-origin tabs/windows will see these changes, so use this for data that’s safe to share broadly.

4. Shared DOM Elements (For Simple Data) #

For basic key-value data, you can use hidden DOM elements (like a <input type="hidden">) in the parent page that both contexts can read and write to. This is less common for complex objects but works for quick, simple data.

<!-- Parent page -->
<input type="hidden" id="sharedUserId" value="">

// Parent page: Set value
document.getElementById('sharedUserId').value = '123';

// Inside iframe: Read and update value
const userIdInput = window.parent.document.getElementById('sharedUserId');
console.log(userIdInput.value); // '123'
userIdInput.value = '456';

A Quick Note on Security #

Even though these methods are simpler than postMessage, always ensure the iframe’s content is fully trusted—since same-origin contexts have full access to each other’s scope, a compromised iframe could modify sensitive data in your parent page. If there’s any chance your setup might become cross-domain in the future, window.postMessage with origin validation is a more future-proof choice.

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