Browsed by
Tag: iframe

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

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

Comments 0 Comment

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 下测试通过

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

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>
防止网页被框架显示

防止网页被框架显示

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

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

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