修改引用自己的 iframe 的样式

作者:cftea 来源:ITPOW(原创) 日期:2008-8-27

今天在 CSDN 上遇到这么一个需求:要求被 iframe 引用的网页去修改该 iframe 的样式,难点是被引用的网页对自己将被哪个 iframe 引用,以及该 iframe 位于哪个页面中一无所知。比如 A.html 中有个 iframe,该 iframe 的 src 为 1.htm,问 1.htm 如何去改 iframe 的样式。

  • 要确信这两个页面要位于同一域名下,否则去修改 iframe 时会说没有权限。
  • 在 1.htm 中设置一个随机标识 var identity = Math.random();。
  • 在 1.htm 中用 window.parent.frames[i] 循环 A.htm 中的 frames。
  • 如果 window.parent.frames[i].identity == identity,则说明找到了引用自己的 iframe。
  • 用 window.parent.frames[i].frameElement 访问这个 iframe,如果不加 frameElement 则表示访问 frame 中的网页,即 1.htm。

1.htm 的全部代码如下:

<?xml version="1.0" encoding="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>cftea</title>
</head>

<body>

<p>Hey</p>

<script type="text/javascript">
<!--
var identity = Math.random();
for (var i = 0; i < window.parent.frames.length; i++)
{
    if (window.parent.frames[i].identity == identity)
    {
        window.parent.frames[i].frameElement.style.width = "3000px";
    }
}
-->
</script>

</body>

</html>
相关文章