iframe – 王正东博客

iframe框架用JavaScript子页面控制父页面

07/29, 2010 东方皓 Comments 0 Comment

parent.html 中的代码为：

如想在c.html 中写一些代码去改变parent.html 中的一些内容，以下代码可作为参考：

1、parent.window.frames 可返回parent.html 中所有的iframe；返回结果应该是一个数组，用parent.window.frames[iframeId]可得到iframeId；

2、用parent.document.getElementById('xxxx')可得到父里的xxxx，并改变相应的值，例如：parent.document.getElementById('xxxx').className = 'test';

3、如果我想在父中再创建一个元素，直接用parent.appendChild(yyyy)在firefox中是可以的，但在IE（最起码IE6）是不行的；所以，要把创建这个动作放在父中来完成，在子中调用；

例如：父中的代码为：

function addIframe(vNum){
var iframe = document.createElement("iframe");
iframe.setAttribute("marginwidth", "0");
iframe.setAttribute("framespacing", "0");
iframe.setAttribute("marginheight", "0");
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("name", vNum);
iframe.setAttribute("id", vNum);
iframe.setAttribute("src", "http://www.zishu.cn");
iframe.setAttribute("scrolling", "no");
iframe.setAttribute("width", "100");
iframe.setAttribute("height", "100");
document.getElementsByTagName('body')[0].appendChild(iframe);
return;
}

子中可以这样调用：

这样就能完整创建一个元素了；

4、同理，如果我想在子中把iframe给隐藏，本来想直接用parent.document.getElementById('uploadframe').style.display = 'none';来弄，但无论是在IE还是FIREFOX中，都是行不通的；只能用上边的方法把动作放在父中。

Iframe框架自动适应宽度和高度 IE与Firefox 下测试通过

04/08, 2010 东方皓 Comments 0 Comment

只需修改框架页

<!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-Type" content="text/html; charset=utf-8" />
<title>iframe</title>
</head>
<body>
<script type="text/javascript">
function SetCwinHeight(){
  var bobo=document.getElementById("bobo"); //iframe id
  if (document.getElementById){
   if (bobo && !window.opera){
    if (bobo.contentDocument && bobo.contentDocument.body.offsetHeight){
     bobo.height = bobo.contentDocument.body.offsetHeight;
    }else if(bobo.Document && bobo.Document.body.scrollHeight){
     bobo.height = bobo.Document.body.scrollHeight;
    }
   }
  }
}
</script>
<iframe width="100%" id="bobo" onload="Javascript:SetCwinHeight()" height="1" frameborder="0" src="http://www.google.com"></iframe>
这里有什么?
</body>
</html>

防止网页被框架显示

08/26, 2009 东方皓 Comments 0 Comment

在做网页广告时，避免别人用irame嵌套后隐藏起来而白白损失广告费，可以用下面代码强制弹出。
1、把这段代码放到head之间

<SCRIPT LANGUAGE=JAVASCRIPT>
if (top.location !== self.location) {
top.location=self.location;
}
</SCRIPT>

2、这种方法比较好，一旦发现别人框架iframe了你的网页，他就自动跳转到你的网站上来了。

把下面代码放到head之间

<SCRIPT LANGUAGE=JAVASCRIPT>
var url=window.location.href;
if(window!=parent)
parent.navigate(url);
</SCRIPT>

大家伙敢快试试吧：）

iframe自适应高度只需一个方法轻松实现兼容IE6、IE7、fireFox

02/21, 2009 东方皓 Comments 0 Comment

iframe自适应高度的轻松实现（只需一个方法）兼容IE6、IE7、fireFox

iframeAutoHeight.html
=============================
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>iframeAutoHeight</title>
<script type="text/javascript">
function iframeAutoHeight(obj)
{
var id = obj.id;
var subWeb = document.frames ? document.frames[id].document : obj.contentDocument;
if(obj != null && subWeb != null)
{
    obj.height = subWeb.body.scrollHeight;
}
}
</script>
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0" bgcolor="#eeeeee">
    <tr>
      <td height="200" align="center">parent table</td>
    </tr>
</table>
<iframe id="ifrID" frameBorder=0 scrolling=no src="iframe.html" width="100%" onload="iframeAutoHeight(this)"></iframe>
</body>
</html>

===========================================
嵌入的iframe.html
===========================================
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>iframe</title>
</head>
<body>
<table width="100%" border="1" cellspacing="1" cellpadding="1">
    <tr>
      <td height="200">table</td>
    </tr>
</table>
<table width="100%" border="1" cellspacing="1" cellpadding="1">
    <tr>
      <td height="200">table</td>
    </tr>
</table>
<table width="100%" border="1" cellspacing="1" cellpadding="1">
    <tr>
      <td height="200">table</td>
    </tr>
</table>
<table width="100%" border="1" cellspacing="1" cellpadding="1">
    <tr>
      <td height="200">table</td>
    </tr>
</table>
</body>
</html>
====================================
说明：
iframe 需要定义id 加入onload="iframeAutoHeight(this)"
页面中需要包含方法
function iframeAutoHeight(obj)
{
var id = obj.id;
var subWeb = document.frames ? document.frames[id].document : obj.contentDocument;
if(obj != null && subWeb != null)
{
    obj.height = subWeb.body.scrollHeight;
}

王正东博客

记录曾经遇到过的问题！ Wordpress交流群：45774935

Browsed by
标签： iframe