新聞財經娛樂♬資訊 News Economy

I have set iframe addEventListener with mousedown event, it works becoz the iframe source is same domain of

Confirm Expert: rcschroeder replied at 2025-04-14 01:49:40    

The issue you're facing is due to the same-origin policy, which prevents scripts from making requests or manipulating DOM elements of a different origin (domain, protocol, or port). This means that when the iframe's source changes to an external domain, the event listener you added in your original script doesn't work.

Here are a few possible solutions to detect the mousedown event on an iframe across domains:

1. **Use the `postMessage` API**: Iframes can send messages back to their parent window using the `postMessage` method. You can create a message that contains information about the mousedown event, and then listen for this message in your original script.

In the iframe:
```javascript
document.getElementById("myiframe").addEventListener('mousedown', function () {
const message = { type: 'mousedown', x: this.offsetLeft, y: this.offsetTop };
window.parent.postMessage(message, '*');
});
```
In the parent window:
```javascript
const iframe = document.getElementById("myiframe");
const listener = (event) => {
if (event.data.type === 'mousedown') {
console.log(`MouseDown event detected at (${event.data.x}, ${event.data.y})`);
}
};

iframe.addEventListener('message', listener);
```
2. **Use the `addEventListener` method with a function that checks the iframe's source**: You can add an event listener to the iframe and check its source to see if it matches your expected value.

In the parent window:
```javascript
const iframe = document.getElementById("myiframe");
const listener = (event) => {
const src = iframe.contentWindow.location.href;
if (src === 'https://samedomain.com//test.html') { // or your expected source
console.log('MouseDown event detected');
}
};

iframe.addEventListener('mousedown', listener);
```
3. **Use a library or framework that allows cross-origin communication**: Some libraries like PostMessage or SharedWorker allow you to communicate with an iframe across domains.

4. **Use a proxy server or a CORS-enabled iframe**: If you have control over the external domain, you can set up a proxy server or use a CORS-enabled iframe to enable cross-origin communication.

5. **Use a different approach**: Instead of trying to detect the mousedown event on the iframe itself, consider using a different approach that doesn't rely on direct access to the iframe's DOM. For example, you could use a library like jQuery UI to handle mouse events on elements within the iframe.

Choose the solution that best fits your requirements and constraints!

Confirm Expert: rcschroeder replied at 2025-04-14 01:48:50    

Detecting mouse down events on iframes from a different domain can be challenging due to the same-origin policy. Here are some methods you can try to overcome this limitation:

1. **Use the `postMessage` API**: Iframes from different domains cannot communicate with each other directly, but they can use the `postMessage` API to send messages between their content windows and the parent window.

You can listen for a message in your parent window and trigger the desired action when you receive it:
```javascript
parent.addEventListener("message", (e) => {
if (e.data === "mousedown") {
console.log('mousedown event detected');
}
});

// In your iframe
iframe.contentWindow.postMessage("mousedown", "*");
```

2. **Use an intermediate proxy**: Create a server that acts as a proxy between the two domains. When the user clicks on the iframe, it can send a message to the server, which then forwards the request to the parent window.

This approach requires setting up a server-side solution and can add complexity to your application.

3. **Use a library or plugin**: There are libraries like `iframe-resizer` that allow you to resize an iframe by sending messages between its content window and the parent window, including mouse events.
4. **Use a third-party service**: Services like IFrameResizer or Iframely provide features that can help you handle iframes on different domains.

5. **Use Custom Web Socket**: Create custom web socket to communicate with the iframe from the parent. When mousedown event occurs, send an event to parent using websocket and trigger your action in the parent window.

```javascript
// In your parent window
const socket = new WebSocket('ws://your-iframe-source.com');

socket.onmessage = (e) => {
if (e.data === 'mousedown') {
console.log('mousedown event detected');
}
};

// In your iframe
const socket = new WebSocket('ws://your-parent-window-source.com');
const mousedownEvent = () => {
socket.send("mousedown");
}
document.getElementById("myiframe").addEventListener("mousedown", mousedownEvent);
```

**Prevent Cross-Domain Access**

To prevent cross-domain access, use CORS headers in your server to allow the parent window to access the iframe.