一、iframe简介

<iframe>是HTML中用于在页面中嵌入另外一个HTML页面的标签。在嵌入的页面加载完毕后，我们可以使用JavaScript操作<iframe>中的内容。

二、iframe的常用属性

src：指定嵌入的页面地址。
name：为<iframe>定义一个名称。
width和height：指定嵌入页面的宽度和高度。
frameborder：指定是否显示边框。
sandbox：指定<iframe>运行在沙箱环境中，不允许访问外部资源。

三、操作iframe的方法

1. 获取iframe元素

使用以下两种方法获取<iframe>元素：

// 方法1：通过id获取iframe元素
let iframe = document.getElementById('my-iframe');

// 方法2：通过querySelector获取iframe元素
let iframe = document.querySelector('iframe');

2. 获取iframe中的文档

可以通过以下方法获取<iframe>中的文档对象：

let iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

3. 操作iframe中的元素

3.1 获取元素

在获取<iframe>中的元素之前，需要先获取iframe中的文档对象。获取方式见上一节。

// 获取body元素
let iframeBody = iframeDoc.body;

// 获取id为my-div的元素
let myDiv = iframeDoc.getElementById('my-div');

3.2 修改元素

修改iframe中的元素只需要使用标准的DOM操作即可。

// 修改body中的文本内容
iframeBody.innerText = 'Hello, iframe';

// 修改div元素的背景色
myDiv.style.backgroundColor = 'red';

4. 在iframe中运行脚本

我们可以使用以下方法在iframe中运行脚本：

let iframeWindow = iframe.contentWindow;
iframeWindow.eval('alert("Hello, iframe")');

注意，上面的代码会在iframe中弹出一个对话框，如果在同源的情况下，我们也可以直接访问iframeWindow对象，然后通过调用该对象上的方法来执行。

四、示例说明

示例1：修改iframe中的元素

HTML代码：

<body>
  <h1>主页面</h1>
  <button onclick="changeIframe()">修改iframe</button>
  <iframe id="my-iframe" src="iframe.html"></iframe>
  <script>
    function changeIframe() {
      let myIframe = document.getElementById('my-iframe');
      let myIframeDoc = myIframe.contentDocument || myIframe.contentWindow.document;
      let myDiv = myIframeDoc.getElementById('my-div');
      myDiv.style.fontSize = '24px';
    }
  </script>
</body>

iframe.html中的代码：

<body>
  <div id="my-div">
    <h1>iframe页面</h1>
  </div>
</body>

点击“修改iframe”按钮后，<div>元素的字体大小将会变为24px。

示例2：在iframe中运行脚本

HTML代码：

<body>
  <h1>主页面</h1>
  <button onclick="runScriptInIframe()">在iframe中运行脚本</button>
  <iframe id="my-iframe" src="iframe.html"></iframe>
  <script>
    function runScriptInIframe() {
      let myIframe = document.getElementById('my-iframe');
      let myIframeWindow = myIframe.contentWindow;
      myIframeWindow.alert('Hello, iframe');
    }
  </script>
</body>

点击“在iframe中运行脚本”按钮后，将会在iframe中弹出一个对话框，显示“Hello, iframe”。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js操作iframe的一些方法介绍 - Python技术站