作者:萝莉控的小潴_515 | 来源:互联网 | 2023-09-11 15:23
一、需求与遇到的问题在网站的后台管理中使用了iframe框架布局,包括顶部菜单、左侧导航和主页面。需求是:点击主页面上的一个按钮,在顶部菜单栏的右侧显示“退出”链接,点击可退出
一、需求与遇到的问题
在网站的后台管理中使用了iframe框架布局,包括顶部菜单、左侧导航和主页面。需求是:点击主页面上的一个按钮,在顶部菜单栏的右侧显示“退出”链接,点击可退出系统。
我的思路是:在顶部的菜单页面放一个不可见的“退出”链接,当用户点击位于iframe中的主页面(mainpage.htm)中的按钮时,在顶部菜单页面的右侧显示“退出”。
我现在遇到的问题是:如何在页面的一个iframe子页面(mainpage.htm)中获取并且操作其它iframe子页面(比如toppage.htm)中的html元素?
二、通过js获取并操作iframe中的元素来解决问题
这里主要就是通过js来操作window对象。window 对象表示浏览器中打开的窗口,如果文档包含框架(frame 或 iframe 标签),浏览器会为 html 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。
经过我在网上查资料,找到了js操作iframe中html元素的方法。示例如下。
1 function showexit() {
2 //获取iframe的window对象
3 var topwin = window.top.document.getelementbyid("topnav").contentwindow;
4 //通过获取到的window对象操作html元素,这和普通页面一样
5 topwin.document.getelementbyid("exit").style.visibility = "visible";
6 }
说明:第一步,通过window.top.document.getelementbyid("topnav")方法获取了顶部菜单页面(toppage.htm)所在的iframe对象;第二步,通过上一步获取到的iframe对象的contentwindow属性得到了iframe中元素所在的window对象;第三步,通过上一步获取到的window对象来操作iframe框架中的元素,这和操作不在iframe框架中的普通html元素是一样的。
下面是我在重现以及解决这个问题时写的全部代码(布局太丑,但重点是js方法):
1.使用iframe框架布局的顶级页面(js操作iframe中的元素.htm)
1
2
3
4
5
63
64
65
66
67
68
76
77
78
79
80
2.顶部菜单栏页面(toppage.htm)
1
2
3
4
5
41
42
43
44 - 文章管理
45 - 会员管理
46 - 系统管理
47 - 退出
48
49
50
3.左侧导航栏(leftpage.htm)
1
2
3
4
5
28
29
30
37
38
4.需要访问顶部菜单页面元素的主页面(mainpage.htm)
1
2
3
4
5
11
19
20
21
22
23
24
25
5.底部页面(bottompage.htm)
1
2
3
4
5
6
7
8 底部版权区:这是一个底部的测试页面
9
10
11
参考资料:http://wenku.baidu.com/view/76d53a7b168884868762d6cb.html
http://www.w3school.com.cn/htmldom/dom_obj_window.asp