怎么对 iframe里运行js

要在 iframe 里运行 JavaScript，可以使用以下几种方法：通过父窗口的脚本控制、在 iframe 中直接嵌入脚本、通过消息传递与父窗口通信。 其中，最有效和灵活的方法是通过父窗口的脚本控制。具体方法包括使用 contentWindow 属性获取 iframe 的窗口对象，然后在该对象上执行 JavaScript 代码。以下将详细介绍这种方法。

一、父窗口脚本控制

通过父窗口控制 iframe 内的 JavaScript 是一种常见且有效的方法。以下是具体步骤：

1. 获取 iframe 的窗口对象

首先，通过 document.getElementById 或 document.querySelector 方法获取 iframe 元素，然后使用 contentWindow 属性获取其窗口对象。

var iframe = document.getElementById('myIframe');
var iframeWindow = iframe.contentWindow;

2. 在 iframe 中执行 JavaScript

在获得 iframe 的窗口对象后，可以直接在该对象上执行 JavaScript 代码。例如，可以调用 eval 方法执行任意 JavaScript 代码。

iframeWindow.eval("alert('Hello from parent!')");

3. 操作 iframe 内部的 DOM 元素

通过 iframe 的窗口对象，可以访问和操作 iframe 内部的 DOM 元素。例如，可以更改 iframe 内部的文本内容。

iframeWindow.document.getElementById('elementInIframe').innerText = 'New Text';

二、在 iframe 中直接嵌入脚本

在创建 iframe 时，可以直接在其内容中嵌入 JavaScript 脚本。这种方法适用于静态内容的嵌入。

<iframe id="myIframe" srcdoc="
  <html>
    <body>
      <p id='elementInIframe'>Original Text</p>
      <script>
        document.getElementById('elementInIframe').innerText = 'New Text';
      </script>
    </body>
  </html>
"></iframe>

三、通过消息传递与父窗口通信

通过 postMessage 方法，父窗口和 iframe 可以相互传递消息。这种方法适用于需要在两个窗口之间进行复杂通信的场景。

1. 父窗口发送消息

父窗口可以通过 iframe 的窗口对象发送消息。

iframeWindow.postMessage('Hello iframe!', '*');

2. iframe 接收消息

在 iframe 内部，可以通过监听 message 事件接收消息。

window.addEventListener('message', function(event) {
  console.log('Received message:', event.data);
});

3. iframe 发送消息给父窗口

同样，iframe 也可以向父窗口发送消息。

window.parent.postMessage('Hello parent!', '*');

4. 父窗口接收消息

父窗口可以通过监听 message 事件接收来自 iframe 的消息。

window.addEventListener('message', function(event) {
  console.log('Received message from iframe:', event.data);
});

四、跨域问题

需要注意的是，如果父窗口和 iframe 不同源（跨域），有些操作可能会受到浏览器的同源策略限制。例如，直接访问和操作 iframe 内部的 DOM 元素可能会被阻止。在这种情况下，可以通过 postMessage 方法进行跨域通信。

1. 设置正确的目标源

在使用 postMessage 方法时，建议明确指定目标源，而不是使用通配符 *，以提高安全性。

iframeWindow.postMessage('Hello iframe!', 'https://target-origin.com');

2. 在接收消息时验证来源

在接收消息时，应该验证消息的来源，以确保安全。

window.addEventListener('message', function(event) {
  if (event.origin === 'https://trusted-origin.com') {
    console.log('Received message from trusted origin:', event.data);
  }
});

五、总结

通过父窗口脚本控制、在 iframe 中直接嵌入脚本、通过消息传递与父窗口通信等方法，可以实现 iframe 内运行 JavaScript 的需求。其中，通过父窗口脚本控制是最灵活和有效的方法，可以方便地在 iframe 内执行任意 JavaScript 代码和操作 DOM 元素。在跨域场景中，建议使用 postMessage 方法进行安全的跨域通信，并注意验证消息的来源。