【HTML】【IFrame】iframe页面跳转

最新推荐文章于 2024-07-21 19:08:41 发布

Dongle_Kevin

最新推荐文章于 2024-07-21 19:08:41 发布

阅读量8.5k

点赞数 5

分类专栏： HTML 代码仓库文章标签： html iframe iframe互操作页面跳转

本文链接：https://blog.csdn.net/Dongle_74/article/details/69772599

版权

代码仓库同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

HTML

4 篇文章 0 订阅

订阅专栏

在html中，iframe的作用就是分割页面，实现一个页面上可以显示多个页面的内容。相信大家在创建iframe框架的时候不是很难，这两天有幸想要扩展下iframe的了解，需要在不同iframe中进行相互操作。那么该如何实现呢？通过网上查找资料，发现这方面的分享有，但是很少。所以，在这里，来献丑一下，分享最近对iframe的了解和使用。

在这里主要描述的是同一个页面中，如何实现一个iframe页面的操作改变另外的iframe页面的内容。

父窗体

首先先来创建一个页面做父窗体iframe.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body >
    <iframe id="top" src="top.html"></iframe>
    <iframe id="bottom" src="bottom.html"></iframe>
</body>
</html>

子窗体

父窗体中有两个iframe框架，所以，下来在分别创建两个页面bottom.html

<div id="bottom" class="bottom">
    <div id="reduceWeight" οnclick="reduceWeight()" >
        <p id="reduceWeight_tab"><i class="tab">测试1</i></p>
    </div>
    <div id="partner" οnclick="partner()">
        <p id="partner_tab" ><i class="tab">测试2</i></p>
    </div>
    <div id="me" οnclick="meView()">
        <p id="me_tab"><i class="tab">测试3</i></p>
    </div>
</div>

top.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <div id="test" class="test">123</div>
</body>
</html>

值得提醒的是：html中可以不用写完全，可以直接写body中内容标签即可，如上面bottom.html，也可以写完整的，如top.html。

跳转页面

另外，再准备一个页面用来跳转Hello.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    Hello World!
</body>
</html>

获得IFrame

在这里，我们在子窗体中操作另一个子窗体显示内容，是动态的，所以需要采用JS来实现。在iframe中获取另外一个iframe是唯一的难点。那么该如何获取呢？我也是通过上网查资料，以及自己一点点尝试，找到了结果。

通用方法

获取iframe有两种方法可以实现，一种是通用的，通过获取ID值就能得到。

        document.getElementById('iframe的ID')

但是，需要注意的是，这种用法是同一个页面内才能使用，即只能在父窗体中才能这样写。所以需要先转换到父窗体中即可。在子窗体中获得父窗体有专门的操作：即parent。parent代表上一层窗体，另外top代表顶层窗体，扩展parent.parent即代表上上层窗体，依次类推。

所以，在iframe中通用的获取另外兄弟iframe的方法即：

       parent.document.getElementById('iframe的ID')

IE专用

第二种获取iframe方法是IE专用的，及只能在IE浏览器中使用，而通用的则是其它浏览器流通的，如Google、Firefox、360极速等等浏览器。在IE专用获取iframe的方法中也有两种方式，不过都是一个道理：

        //第一种：通过frame数组获取(参数可以是ID也可以是Name
	parent.frames['iframe的ID']
        parent.frames['iframe的name']


        //第二种：通过frame元素获得，同样参数既可以是ID，也可以是Name
	parent.frameElement['iframe的ID']

上面的代码是直接在子窗体中处理的，所以有parent前缀，如果是父窗体，将parent去掉即可。

现在获取了iframe元素，接下来就是跳转页面的实现了。相信这里难不倒大家了。通过查找到的资料显示，可以设置区分浏览器的功能实现跳转。即：

	if (document.all){ // IE 专用
		doc = document.frames["iframe的ID"].src="Hello.html"; 
	}else{ // 标准（其它标准浏览器
		doc = document.getElementById("iframe的ID").src="Hello.html"; 
	}

记得将上面的对应JS方法中哦，页面上有方法名，JS的引用大家进行吧，我就不献丑啦！

如果仍有疑问、想法或发现，欢迎多多探讨，共同进步！