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

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

原创最新推荐文章于 2023-11-22 17:23:42 发布 · 620 阅读

CC 4.0 BY-SA版权

63 篇文章

订阅专栏

本文详细介绍了如何在网页中查找并操作iframe页面元素，包括查找iframe内部元素、调用父页面定义的方法和访问父页面定义的变量。通过示例代码展示了如何在iframe中实现这些操作。

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>
        