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

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

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

父页面读写操作子页面：

 代码如下 复制代码

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

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

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

子页面读写操作父页面：

 代码如下 复制代码

<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="http://www.yyy.com/child.html" 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 = 'http://www.xxx.com/father.html';
    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='http://comments.cnmo.com/iframe_comment.php?kindid=9&articleid=<?=$pic_id?>&tw=620&style=11&font_num=180&pagesize=3' 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"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" 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";
    }

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

时间： 2024-12-21 03:12:32

Javascript中iframe常用技巧整理(自适应/跨域)的相关文章

Javascript中最常用的55个经典技巧

原文:Javascript中最常用的55个经典技巧 1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 <table oncontextmenu = "return(false)"></table> 可用于Table 2. <body onselectstart="return false"> 取消选取.防止复制 3. onpaste=&quo

JavaScript中iframe实现局部刷新的几种方法汇总_javascript技巧

Iframe是一种嵌入网页的框架形式,Web页面可以通过更改嵌入的部分,达到部分内容刷新. Iframe的用法与普通的标签元素DIV类似,可以指定在页面中嵌入的位置.颜色.界面布局等 一.iframe实现局部刷新方法一 <script type="text/javascript"> $(function(){ $("#a1").click(function(){ var name= $(this).attr("name"); $(&q

JavaScript中一些常用的正则表达式(推荐)_正则表达式

 正则表达式(regular expression)描述了一种字符串匹配的模式,可以用来检查一个串是否含有某种子串.将匹配的子串做替换或者从某个串中取出符合某个条件的子串等. var validateRegExp = { decmal: "^([+-]?)\\d*\\.\\d+$", // 浮点数 decmal1: "^[1-9]\\d*.\\d*|0.\\d*[1-9]\\d*$", // 正浮点数 decmal2: "^-([1-9]\\d*.\\d*

JavaScript中一些常用的正则表达式(推荐)

正则表达式(regular expression)描述了一种字符串匹配的模式,可以用来检查一个串是否含有某种子串.将匹配的子串做替换或者从某个串中取出符合某个条件的子串等. var validateRegExp = { decmal: "^([+-]?)\\d*\\.\\d+$", // 浮点数 decmal1: "^[1-9]\\d*.\\d*|0.\\d*[1-9]\\d*$", // 正浮点数 decmal2: "^-([1-9]\\d*.\\d*|

JavaScript使用HTML5的window.postMessage实现跨域通信例子

 这篇文章主要介绍了JavaScript使用HTML5的window.postMessage实现跨域通信例子,需要的朋友可以参考下 JavaScript由于同源策略的限制,跨域通信一直是棘手的问题.当然解决方案也有很多:  1.document.domain+iframe的设置,应用于主域相同而子域不同:  2.利用iframe和location.hash,数据直接暴露在了url中,数据容量和类型都有限  3.Flash LocalConnection, 对象可在一个 SWF 文件中或多个 SW

JavaScript学习总结(二)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

一.AJAX示例 AJAX全称为"Asynchronous JavaScript And XML"(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效果. 1.1.优点 不需要插件支持 优秀的用户体验 提高Web程序的性能 减轻服务器和带宽的负担 1.2.缺点 浏览器对XMLHttpRequest对象的支持度不足,几乎所有浏览器现在都支持 破坏浏览器"前进"."后退"按钮的正常功能,可以通过简单的

javascript中IFrame跨域高度自适应实现代码

同域时Iframe高度自适应 下面的代码兼容IE/Firefox浏览器,控制id为"iframeid"的iframe的高度,通过JavaScript取得被嵌套页面最终高度,然后在主页面进行设置来实现. 另外,请注意此解决方案仅供同域名下使用.  代码如下 复制代码     <script type="text/javascript">       function SetCwinHeight(){         var iframeid=documen

javascript 四十条常用技巧大全_javascript技巧

1. 将彻底屏蔽鼠标右键 oncontextmenu="window.event.returnValue=false" < table border oncontextmenu=return(false)>< td>no< /table> 可用于 Table 2. 取消选取.防止复制 <span class="tag" style="color:rgb(0,0,128)">< <span

JavaScript使用HTML5的window.postMessage实现跨域通信例子_javascript技巧

JavaScript由于同源策略的限制,跨域通信一直是棘手的问题.当然解决方案也有很多: 1.document.domain+iframe的设置,应用于主域相同而子域不同: 2.利用iframe和location.hash,数据直接暴露在了url中,数据容量和类型都有限 3.Flash LocalConnection, 对象可在一个 SWF 文件中或多个 SWF 文件间进行通信, 只要 在同一客户端就行,跨应用程序, 可以跨域. window.name 保存数据以及跨域 iframe 静态代理动