iframe 网页导航与代码编辑器应用

作为前端开发者,我们经常会遇到在一个页面中嵌套 iframe 的场景。本文将介绍如何在嵌套的 iframe 之间进行互相访问和跳转,以及如何利用 iframe 实现一个简单的代码编辑器应用。

嵌套的 iframe 相互访问

父页面访问子 iframe

在父页面中访问子 iframe 的 window 对象可以通过 contentWindow 属性:

// 获取子iframe的window对象
var childWindow = document.getElementById('myIframe').contentWindow;

// 访问子iframe的DOM
var childDoc = childWindow.document;
var ele = childDoc.getElementById('test');

子 iframe 访问父页面

在子 iframe 中访问父页面的 window 对象可以使用 parent 关键字:

// 获取父页面的window对象
var parentWindow = parent;

// 访问父页面的DOM
var parentDoc = parentWindow.document;
var ele = parentDoc.getElementById('test');

访问顶层页面

不管嵌套多少层 iframe,都可以通过 top 关键字访问到最顶层的页面窗口:

// 获取顶层页面的window对象
var topWindow = top;

// 访问顶层页面的DOM
var topDoc = topWindow.document;
var ele = topDoc.getElementById('test');

iframe 跳转

父页面控制子 iframe 跳转

可以通过设置子 iframe 的 src 属性来控制子 iframe 页面的跳转:

// 让子iframe跳转到新的url
document.getElementById('myIframe').src = 'new_url';

子 iframe 控制父页面跳转

子 iframe 中可以通过 parent.location 对象控制父页面的跳转:

// 让父页面跳转到新的url
parent.location.href = 'new_url';

导航操作

除了直接设置 url 外,还可以通过 window.open, location.assign, location.replace 等方法实现页面导航跳转。

代码编辑器应用

下面利用 iframe 实现一个简单的代码编辑器页面。

<!-- 代码编辑器页面 -->
<div class="code-editor">
  <textarea id="code">
    <!-- 代码编辑区 -->
  </textarea>

  <iframe id="preview"></iframe>
</div>

<script>
  // 监听编辑区文本变化
  document.getElementById('code').addEventListener('input', function () {
    updatePreview();
  });

  function updatePreview() {
    var code = document.getElementById('code').value;
    var iframe = document.getElementById('preview');

    // 更新预览iframe的内容
    iframe.contentDocument.body.innerHTML = code;
  }
</script>

<style>
  .code-editor {
    display: flex;
  }

  #code {
    width: 50%;
    height: 400px;
  }

  #preview {
    width: 50%;
    height: 400px;
    border: none;
  }
</style>

这个例子创建了一个代码编辑区 <textarea> 和预览 <iframe>。当编辑区的内容发生变化时,会触发 updatePreview 函数,更新 iframe 里的内容。