jQuery 获取 iframe 父页面与子页面的元素和方法

最新推荐文章于 2023-11-22 17:23:42 发布

九木旭

最新推荐文章于 2023-11-22 17:23:42 发布

阅读量565

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/xdprintf/article/details/49558837

版权

63 篇文章 0 订阅

订阅专栏

1）在页面中查找 iframe 页面元素：
$(‘#iframe’).contents().find(‘#id’)

2）在 iframe 中查找父页面元素：
$(‘#id’, parent.document)

3）在 iframe 中调用父页面中定义的方法和变量：
parent.method
parent.value

父页面

 
         <div id= 
         "div" 
         >div element</div> 
        

 
         <iframe id= 
         "iframe" 
         src= 
         "page.html" 
         frameborder= 
         "0" 
         ></iframe> 
        

 
         <script src= 
         "http://code.jquery.com/jquery-latest.min.js" 
         ></script> 
        

 
         <script> 
        

 
         $( 
         function 
         ($) { 
        

 
         //在页面中查找 iframe 页面元素

 
              
         var 
         p = $( 
         '#iframe' 
         ).contents().find( 
         '#p' 
         ).text(); 
        

 
         alert(p);

});

 
         //自定义变量 
        

 
         var 
         hello =  
         'hello' 
         ; 
        

 
         //自定义方法 
        

 
         function 
         getHelloWorld() {

 
         alert( 
         'hello world' 
         );

}

 
         </script> 
        

子页面

 
         <p id= 
         "p" 
         >p element</p> 
        

 
         <script src= 
         "http://code.jquery.com/jquery-latest.min.js" 
         ></script> 
        

 
         <script> 
        

 
         $( 
         function 
         ($) { 
        

 
         //在 iframe 中查找父页面元素

 
         alert($( 
         '#div' 
         , parent.document).text());

 
         //在 iframe 中调用父页面中定义的方法

 
         parent.getHelloWorld();

 
         //在 iframe 中调用父页面中定义的变量

 
         alert(parent.hello);

});

 
         </script> 
        

关注

专栏目录