1. iframe概述
在了解iframe跳转之前，需要先概述一下iframe的作用。iframe（Inline Frame）是HTML的一种元素，它可以让一个HTML文档嵌入到另一个HTML文档中。也就是说，一个HTML页面可以包含多个iframe标签，每个iframe都可以指向一个不同的文档，这些文档之间可以互相跳转和交互。
下面是一个基本的iframe代码示例：
<iframe src="http://www.example.com/"></iframe>上面的代码会在当前页面中嵌入一个iframe，该iframe会加载http://www.example.com/网站的内容。
2. iframe跳转的三种方式
在实际开发中，我们可能会需要在iframe中进行页面跳转。下面介绍几种常见的iframe跳转方式。
2.1 使用a标签的target属性
使用a标签的target属性可以在当前iframe中跳转到一个新的页面。示例代码如下：
<!-- 在iframe中嵌入一个页面 -->
<iframe src="http://www.example.com/"></iframe>
<!-- 在嵌入的页面中添加链接，点击链接后在当前iframe中跳转到新页面 -->
<a href="http://www.newexample.com/" target="_self">新页面</a>
上面的代码中，“_self”表示在当前iframe中打开页面。
2.2 使用JavaScript代码
可以使用JavaScript代码在iframe中进行页面跳转。示例代码如下：
<!-- 在iframe中嵌入一个页面 -->
<iframe id="myFrame" src="http://www.example.com/"></iframe>
<!-- 在嵌入的页面中添加按钮，点击按钮后在当前iframe中跳转到新页面 -->
<button onclick="document.getElementById('myFrame').src='http://www.newexample.com/'">新页面</button>
上面的代码中，当点击“新页面”按钮时，会将iframe的src属性替换成http://www.newexample.com/，达到在当前iframe中跳转到新页面的效果。
2.3 使用form表单
使用form表单也可以在iframe中跳转到新页面。示例代码如下：
<!-- 在iframe中嵌入一个页面 -->
<iframe id="myFrame" src="http://www.example.com/"></iframe>
<!-- 在嵌入的页面中添加表单，提交表单后在当前iframe中跳转到新页面 -->
<form target="myFrame" action="http://www.newexample.com/">
<input type="submit" value="新页面">
</form>
上面的代码中，当提交表单时，target属性指定为“myFrame”，意味着提交结果会在当前iframe中显示，而不是跳转到新页面。
3. iframe跨域限制
需要注意的是，如果iframe与嵌入的页面属于不同的域名，那么就会有跨域限制。例如，在一个http://www.example.com/的页面中，嵌入了一个http://www.newexample.com/的页面，那么就会出现跨域限制。在这种情况下，JavaScript代码和form表单的方式将无法在iframe中进行页面跳转。
不过，可以通过使用postMessage API来实现跨域的页面跳转。postMessage API是HTML5中的一项特性，可以在不同的窗口或标签页之间传递消息。其基本用法如下：
// 发送消息
var target = document.getElementById('myframe').contentWindow;
target.postMessage('hello', 'http://www.newexample.com/');
// 接收消息
window.addEventListener('message', function(event) {
if (event.origin === 'http://www.example.com/') {
console.log('Received message: ' + event.data);
} else {
console.log('Invalid message origin: ' + event.origin);
}
});
上面的代码中，target.postMessage('hello', 'http://www.newexample.com/')表示向指定域名的页面发送消息。window.addEventListener('message', function(event) {...})则表示在收到消息时执行某些操作。
4. 总结
本文介绍了在iframe中进行页面跳转的常见方式，包括使用a标签的target属性、JavaScript代码和form表单。同时也提到了跨域限制，以及如何使用postMessage API实现跨域的页面跳转。