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

parent.html  中的代码为:

<iframe marginwidth=”0″ framespacing=”0″ marginheight=”0″ frameborder=”0″ 
 name=”uploadframe” id=”uploadframe” src=”c.html” scrolling=”no” width=”100″ height=”100″ ></iframe>

如想在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;
}

子中可以这样调用:

<script>
parent.addIframe(‘xxxx’);
</script>

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

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

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

只需修改框架页

<!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>

防止网页被框架显示

在做网页广告时,避免别人用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

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;
}