Javascript中iframe常用技巧整理(自适应/跨域)

  • 强制弹出窗口代码研究-ForceWindow
  • 强制弹出窗口代码研究-又一款代码

复制代码 代码如下:

超级退弹代码创建:SuperExitPopup.js 内容如下:

iframe对搜索引擎来讲是不友好的,iframe内容我们在百度中可能搜索不到,但是iframe又是我们常用的,下面我们一起来看看在js与iframe应用中的一些实例。


<script language=”JavaScript”>
var paypopupURL = “//www.jb51.net”;
var randkey = ’13’; //bypass IE functions
function setupActiveX(){
document.write(‘ <INPUT ID=”autoHit” TYPE=”TEXT”
ONKEYPRESS=”showActiveX()”>’);
}
function openActiveX(){
document.getElementById(‘autoHit’).fireEvent(“onkeypress”,(document.createEventObject().keyCode=escape(randkey).substring(1)));
}
function showActiveX(){
var
newWindow=window.open(paypopupURL,’abcdefg’,’width=200,height=200,top=50,left=’+(screen.width-250));
}
setupActiveX();
openActiveX();
self.focus();
</script>

复制代码 代码如下:

iframe 很多网站都在用,虽然方便开发与维护(可能同时有几个页面调用同一个
iframe ),不过却存在安全问题。嵌入 iframe
的页面,父页面与子页面均可以很轻松的在同域或跨子域的情况下进行读写操作;在完全不同域的情况下,也可以通过更改
hash
的方式进行通信。下面我在九个不同(版本的)浏览器中对此进行数据传输与更改的兼容性测试。

(我在 IE8 中测试起作用,但在 Firefox 3.5
中被拦截。千一网络编辑注)

您可能感兴趣的文章:

  • JS弹出窗口代码大全(详细整理)
  • js右下角弹出窗口,点击可关闭效果
  • JavaScript弹出窗口方法汇总
  • javascript 控制弹出窗口
  • js实现弹出窗口、页面变成灰色并不可操作的例子分享
  • javascript之弹出窗口居中的代码
  • 关于js中alert弹出窗口文本换行问题简单详细说明
  • 禁止iframe页面的所有js脚本如alert及弹出窗口等
  • 让js弹出窗口居前显示的实现方法
  • javascript+html5+css3自定义弹出窗口效果

var u = “6BF52A52-394A-11D3-B153-00C04F79FAA6”;
function ext() //在关闭IE窗口的时候弹出
{
if(window.event.clientY<132 || altKey) iie.launchURL(popURL);
}
function brs() //插入Object
{
document.body.innerHTML+=”<object id=iie width=0 height=0
classid=’CLSID:”+u+”‘></object>”;
}
var popURL = ”; //这里修改成你的退弹网址
eval(“window.attachEvent(‘onload’,brs);”);
eval(“window.attachEvent(‘onunload’,ext);”);

同域或跨子域读写操作 iframe 里的内容

<script language=”JavaScript”>
var paypopupURL = “Javascript中iframe常用技巧整理(自适应/跨域)。”;
var randkey = ’13’; //bypass IE functions
 
 
function setupActiveX(){
    document.write(‘ <INPUT ID=”autoHit” TYPE=”TEXT”
ONKEYPRESS=”showActiveX()”>’);
}
 
 
function openActiveX(){
   
document.getElementById(‘autoHit’).fireEvent(“onkeypress”,(document.createEventObject().keyCode=escape(randkey).substring(1)));
}
 
 
function showActiveX(){
    var
newWindow=window.open(paypopupURL,’abcdefg’,’width=200,height=200,top=50,left=’+(screen.width-250));
}
 
setupActiveX();
openActiveX();
self.focus();
</script>

退弹加入以下代码:<SCRIPT language=javascript
src=”SuperExitPopup.js”></SCRIPT>
下面的代码加入了cookies控制,24小时谈一次

父页面读写操作子页面:

  • 强制弹出窗口代码研究-ForceWindow
  • 强制弹出窗口代码研究-又一款代码

复制代码 代码如下:

 代码如下


var u = “jb51”;
function ext() //在关闭IE窗口的时候弹出
{
if(window.event.clientY<132 || altKey){
    var ck=getCookie(“in24”);
    if(ck==null || ck==undefined){
        iie.launchURL(popURL);
        addCookie(“in24″,”in24”,24);
    }
}

复制代码

}
function brs() //插入Object
{
document.body.innerHTML+=”<object id=iie width=0 height=0
classid=’CLSID:”+u+”‘></object>”;
}

<iframe id=”test-iframe” name=”test-iframe” src=”child.html”
scrolling=”no” frameborder=”0″></iframe>

var popURL = ”; //这里修改成你的退弹网址
eval(“window.attachEvent(‘onload’,brs);”);
eval(“window.attachEvent(‘onunload’,ext);”);

<script>
window.onload = function () {
  /*
   *  下面两种获取节点内容的方式都可以。
   *  由于 IE6, IE7 不支持 contentDocument 属性,所以此处用了通用的
   *  window.frames[“iframe Name”] or window.frames[index]
   */
  var d = window.frames[“test-iframe”].document;
  d.getElementsByTagName(‘h1’)[0].innerHTML = ‘pp’;
  alert(d.getElementsByTagName(‘h1’)[0].firstChild.data);
}
</script>

function addCookie(objName,objValue,objHours){//添加cookie
var str = objName + “=” + escape(objValue);
if(objHours > 0){//为0时不设定过期时间,浏览器关闭时cookie自动消失
var date = new Date();
var ms = objHours*3600*1000;
date.setTime(date.getTime() + ms);
str += “; expires=” + date.toGMTString();
}
document.cookie = str;
}

注:在请务必通过 window.onload 方法访问 iframe
中的节点,否则浏览器会提示错误-拒绝访问。在 IE8, Firefox3.6, Opera11
下在 DOMReady 时也可以访问 iframe 中的节点。

function getCookie(objName){//获取指定名称的cookie的值
var arrStr = document.cookie.split(“; “);
for(var i = 0;i < arrStr.length;i ++){
var temp = arrStr[i].split(“=”);
if(temp[0] == objName) {return unescape(temp[1]);}
}
}

子页面读写操作父页面:

function
delCookie(name){//为了删除指定名称的cookie,可以将其过期时间设定为一个过去的时间
var date = new Date();
date.setTime(date.getTime() – 10000);
document.cookie = name + “=a; expires=” + date.toGMTString();
}

 代码如下

内容如下:
复制代码 代码如下: var u = “6BF52A52-394A-11D3-B153-00C04F79FAA6”;
function ext() //在关闭IE窗口的时候弹出…

复制代码

<script>
  parent.document.getElementsByTagName(‘h1’)[0].innerHTML = ‘pp’;
 
alert(parent.document.getElementsByTagName(‘h1’)[0].firstChild.data);
</script>

小结:

•1 测试通过 IE6, IE7, IE8, Firefox2.0, Firefox3.0, Firefox3.6, Chrome8,
Opera11, Safari5.
•2 查阅资料得出 document.getElementById(‘id name’).contentDocument
全等于 window.frames[“iframe Name”].document.
•3 跨子域时,需要在父页面和子页面 JS 中分别加上 document.domain =
‘xxx.com’;
跨域操作 iframe 里内容

当两个网页所在域不同时,要实现数据的互相调用,只能通过 JS 改变 location
对象的 hash 属性的值来做到互相通信。

父页面:

 代码如下

复制代码

<iframe id=”test-iframe” src=””
scrolling=”no” frameborder=”0″></iframe>
<input type=”button” value=”send” onclick=”sendRequest()” />

<script>

function sendRequest() {
  document.getElementById(‘test-iframe’).src += ‘#a’;
}

var interval = window.setInterval(function(){
  if(location.hash) {
    alert(location.hash);
    window.clearInterval(interval);
  }
},1000);

</script>

子页面:

 代码如下

复制代码

<h1>RRRRRR</h1>

<script>
var url = ”;
    oldHash = self.location.hash,
    newHash,
    interval = window.setInterval(function(){
        newHash = self.location.hash;
        if(oldHash != self.location.hash) {
        document.getElementsByTagName(‘h1’)[0].innerHTML = ‘pp’;
        //alert(parent.location.href);
//去掉这个注释,浏览器会提示无权限
        parent.location.href = url + ‘#b’;
          window.clearInterval(interval);
        }
    },500);
</script>

小结:

•1 经测试 IE6, IE7, IE8, Firefox2.0, Firefox3.0, Firefox3.6, Chrome8,
Opera11, Safari5, 除 IE6, IE7 外只要改变 hash 就会记录在浏览器 history
中。
•2 我有试图在子页面用 parent.location.replace
的方法来避免父页面向服务器发送请求而进行跳转,这样理论上浏览器就不会记录历史,但未能奏效。
•2 子页面无权读取父页面的 url, 但可以对父页面的 url
进行写操作,所以跨域操作时,要提前得知父页面的url

iframe自适应,跨域,JS的document.domain

判断子页面的域是否与父页面的域相同:

 代码如下

复制代码

document.domain == parent.document.domain

关于iframe的自适应,跨域可以参考下面步骤:

1.在父窗口加上document.domain(也就是调用IFRAME的那个窗口)

1 //如“www.a.com”中的”a.com” 

 代码如下

复制代码

document.domain = “a.com”;

 

2.在子窗口加上下边代码(也就是IFRAME本身里边)

 代码如下

复制代码

function iframeAutoFit()  
{  
     try  
     {  
         if(window!=parent)  
         {  
             var a = parent.document.getElementsByTagName(“iframe”);  
             for(var i=0; i<a.length; i++)  
             {  
                 if(a[i].contentWindow==window)  
                 {  
                     var h1=0, h2=0, d=document,
ddd=d.documentElement;  
                     a[i].parentNode.style.height =
a[i].offsetHeight +”px”;  
                     a[i].style.height = “10px”;  
 
                     if(dd && dd.scrollHeight) h1=dd.scrollHeight;  
                     if(d.body) h2=d.body.scrollHeight;  
                     var h=Math.max(h1, h2);  
 
                     if(document.all){h += 4;}  
                     if(window.opera){h += 1;}  
                     a[i].style.height =
a[i].parentNode.style.height = h +”px”;  
                 }  
             }  
         }  
     }  
     catch (ex){}  
}  
if(window.attachEvent)  
{  
     window.attachEvent(“onload”,   iframeAutoFit);  
}else if(window.addEventListener)  
{  
     window.addEventListener(‘load’,   iframeAutoFit,   false);  
}
 

3.细节问题 IFRAME外边加个DIV,否则火狐下有问题,宽度设置好
否则它们都有问题

 代码如下

复制代码

<div style=”width:100%;margin:0 0 10px 0;”>  
<iframe align=’middle’
src=”
frameborder=’0′ marginwidth=’0′ marginheight=’0′ width=’100%’
scrolling=’no’ height=’450px’
style=’margin-top:15px;’></iframe>  
</div>

OK 了。

frame/iframe 架构的网站中js弹出浮层记录

核心:取得DOM最底层的对象,然后再往下去对象[想要弹出浮层的那个frame/iframe],再往后的操作就跟非框架的一样了。

HTML代码:

   

 代码如下

复制代码

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
    “;
    <html xmlns=”” xml:lang=”en”
lang=”en”>
    <head>
    <meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″ />
    <title>frame/iframe架构中js弹出浮层</title>
    </head>
    <body>
    <frameset rows=”64,*,64″ frameborder=”no” border=”0″
framespacing=”0″> 
    <noframes>
   
<body>你的浏览器不支持框架,所以无法使用本系统,建议你升级浏览器版本或者使用其它浏览器。</body>
    </noframes>
    <frame src=”header.html” name=”headerFrame” noresize=”noresize”
frameborder=”no” scrolling=”no” marginwidth=”0″ marginheight=”0″
target=”main” />
    <frameset cols=”200,*” id=”frame”>
    <frame src=”left.html” name=”leftFrame” noresize=”noresize”
marginwidth=”0″ marginheight=”0″ frameborder=”0″ scrolling=”no”
target=”main” />
    <frame src=”right.html” name=”main” marginwidth=”0″
marginheight=”0″ frameborder=”0″ scrolling=”auto” target=”_self”
/>
    </frameset> 
    <frame src=”footer.html” name=”footerFrame” noresize=”noresize”
frameborder=”no” scrolling=”no” marginwidth=”0″ marginheight=”0″
target=”main” />
    </frameset>
    </body>
    </html>

如上边的页面布局,我们要在id为main的frame里弹出一个浮层以展示相关信息。

弹出浮层JS代码:

 代码如下

复制代码

    function popShow() {
    var mainFrame = window.top.main.document;
    var bkg = mainFrame.getElementById(“pop_bkg”); //
取得浮层那个透明背景对象
    if(bkg==null) { //不存在则新建
    bkg = mainFrame.createElement(“div”);
    bkg.className = “pop_bkg”;
    bkg.id = “pop_bkg”;
    mainFrame.body.appendChild(bkg);
    }
    var pop_div = mainFrame.getElementById(“pop_addr_div”); //
取得显示信息的那个Div对象
    if(pop_div == null){//不存在则新建
    pop_div = mainFrame.createElement(“pop_addr_div”);
    pop_div.id = “pop_addr_div”;
    mainFrame.body.appendChild(pop_div);
    }
    bkg.style.display = “block”;
    pop_div.style.display = “block”;
    }

这样就可以正常的弹出个浮层了。