zoukankan      html  css  js  c++  java
  • js 在iframe子页面获取父页面元素,或在父页面 获取iframe子页面的元素的几种方式

    用JS或jquery访问页面内的iframe,兼容IE/FF 
    注意:框架内的页面是不能跨域的!
    
    假设有两个页面,在相同域下.
    
    index.html 文件内含有一个iframe:
    
    XML/HTML代码
    <!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=gb2312" />  
    <title>页面首页</title>  
    </head>  
      
    <body>  
    <iframe src="iframe.html" id="koyoz" height="0" width="0"></iframe>  
    </body>  
    </html>   
    iframe.html 内容:
    
    XML/HTML代码
    <!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=gb2312" />  
    <title>iframe.html</title>  
    </head>  
      
    <body>  
    <div id="test">www.koyoz.com</div>  
    </body>  
    </html>  
    
    1. 在index.html执行JS直接访问:
    
    JavaScript代码
    document.getElementById('koyoz').contentWindow.document.getElementById
    
    ('test').style.color='red'   
    通过在index.html访问ID名为'koyoz'的iframe页面,并取得此iframe页面内的ID为'test'的
    
    对象,并将其颜色设置为红色.
    
    此代码已经测试通过,能支持IE/firefox .
    
    2. 在index.html里面借助jQuery访问:
    
    JavaScript代码
    $("#koyoz").contents().find("#test").css('color','red');   
    此代码的效果和JS直接访问是一样的,由于借助于jQuery框架,代码就更短了.
    
    
    收集网上的一些示例:
    用jQuery在IFRAME里取得父窗口的某个元素的值
    只好用DOM方法与jquery方法结合的方式实现了
    
    1. 在父窗口中操作 选中IFRAME中的所有单选钮
    $(window.frames["iframe1"].document).find("input:radio").attr("checked","true");
    
    2. 在IFRAME中操作 选中父窗口中的所有单选钮
    $(window.parent.document).find("input:radio").attr("checked","true");
    
    父窗口想获得IFrame中的Iframe,就再加一个frames子级就行了,如:
    $(window.frames["iframe1"].frames["iframe2"].document).find("input:radio").attr("checked","true");
    
    3.在子窗口中调用父窗口中的另一个子窗口的方法(FRAME):
    
    parent.frames["Main"].Fun();
    
    ----------------------------------------------------jQuery取得iframe中元素的几种方法-------------------------------
    
     
    
    在iframe子页面获取父页面元素
    代码如下:
    
    $('#objId', parent.document);
    
    在父页面 获取iframe子页面的元素
    代码如下:
    
    $("#objid",document.frames('iframename').document)
    
     
    
    $(document.getElementById('iframeId').contentWindow.document.body).html()
    
    显示iframe中body元素的内容。
    
    
    $("#testId", document.frames("iframename").document).html();
    
    根据iframename取得其中ID为"testId"元素
    
    
    $(window.frames["iframeName"].document).find("#testId").html()
  • 相关阅读:
    LeetCode 88. Merge Sorted Array
    LeetCode 75. Sort Colors
    LeetCode 581. Shortest Unsorted Continuous Subarray
    LeetCode 20. Valid Parentheses
    LeetCode 53. Maximum Subarray
    LeetCode 461. Hamming Distance
    LeetCode 448. Find All Numbers Disappeared in an Array
    LeetCode 976. Largest Perimeter Triangle
    LeetCode 1295. Find Numbers with Even Number of Digits
    如何自学并且系统学习计算机网络?(知乎问答)
  • 原文地址:https://www.cnblogs.com/thiaoqueen/p/7277964.html
Copyright © 2011-2022 走看看