`

JQUERY IFRAME 父页面子页面互相查找

jqueryjsiframehtml 
阅读更多
JQUERY IFRAME

下面简单使用Jquery来操作iframe的一些记录，这个使用纯JS与可以实现。

第一、在iframe中查找父页面元素的方法：
$('#id', window.parent.document)

第二、在父页面中获取iframe中的元素方法：
$(this).contents().find("#suggestBox")

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

 

iframe里用jquery获取父页面body
iframe.html

<html>
<script src='jquerymin.js'>
</script>
<body id='1'>
    <div>it is a iframe</div>
</body>   
<script>
    $(document).ready(
        function()
        {
          
        var c = $(window.parent.document.body) //麻烦的方法： var c = $($(window).eq(0)[0].parent.document).find('body'); ，忘了可以用前面的方法了
           
        alert(c.html());
        }
    );
   
</script>
</html>





content.html

<html>
    <script src='jquerymin.js'>
</script>
<body id='fa'>
    <iframe src='iframe.html' width='100' height='100'></iframe>
    <br>
        <br>
            <br>
            <div id='mydiv'>content iframe</div>
</body>   
<script>
    function a()
    {
        alert(1);
    }
    alert($(document).text());
    </script>
</html>
分享到：
| rabbitmq 学习-5-server管理
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Jquery调用iframe父页面中的元素及方法

    1. 在iframe中查找父页面元素： 在jQuery中，可以通过传递window.parent.document作为上下文来查找父页面的元素。例如，如果我们知道父页面中有一个id为"parentElement"的元素，我们可以通过以下方式获取： ```...

    JQUERY实现iframe页面切换功能

    本篇文章将详细讲解如何利用jQuery实现iframe页面的切换功能，以便于创建更丰富的用户体验和更高效的页面加载策略。 首先，我们需要理解iframe的基本概念。Iframe（Inline Frame）是HTML中的一个元素，它允许我们在...

    iframe父页面与子页面通信及相互调用方法

    - **`jQuery`插件**：`jqueryiframe`可能包含一些jQuery插件，如`iframeResizer`，这些插件简化了iframe的尺寸调整和通信过程。 4. **JQuery方法** - **`$(selector).contents().find()`**：使用jQuery选择器获取...

    jquery应用子页面在父页面打开

    在这个场景下，"jquery应用子页面在父页面打开"意味着利用jQuery的方法和特性来处理父子页面之间的交互。 首先，我们需要理解基本的HTML框架结构，如`&lt;iframe&gt;`元素，它可以用于在父页面中嵌入子页面。通过设置`src...

    JQuery操作iframe父页面与子页面的元素与方法(实例讲解)

    第一、在iframe中查找父页面元素的方法：$(‘#id’, window.parent.document) 第二、在父页面中获取iframe中的元素方法：$(this).contents().find(“#suggestBox”) 第三、在iframe中调用父页面中定义的方法和变量：...

    jquery点击按钮隐藏父页和引用页的iframe

    在提供的压缩包文件中，"jquery_点击按钮_隐藏父页-引用页的iframe"可能包含了示例代码或演示页面，你可以参考这些资源来进一步理解和实践上述步骤。通过熟练掌握`jQuery`的用法，你可以创建出更多复杂且富有交互性...

    父页面得到iframe的数据和iframe页面得到父页面的数据.txt

    在IT领域，网页编程尤其是JavaScript和jQuery操作DOM元素时，涉及到父页面与iframe子页面之间的数据交互是一项常见但又相对复杂的技术。本文将基于提供的文件信息，深入解析父页面如何获取iframe子页面的数据，以及...

    js图片iframe内页父页展示全屏

    在网页设计中，有时我们需要在父页面（外层页面）中通过`iframe`来嵌入子页面（内层页面），并实现子页面中的图片在父页面全屏展示。这个过程涉及到多个技术点，包括HTML、CSS以及JavaScript。下面将详细解释如何...

    jquery 查找iframe父级页面元素的实现代码

    如示例中的代码，使用了jQuery函数，并传入了iframe的父文档作为ownerDocument参数，这样就可以在父页面中访问iframe的内容。 3. iframe的跨域问题： 正如文中所提及的，当iframe的内容不是与其父页面同源的情况下...

    iframe弹出框遮罩父类页面

    在网页开发中，有时我们需要实现一个功能，即在iframe中打开一个新的弹出窗口，并且这个弹出窗口能够遮罩住其父级页面，提供一种更好的用户体验。标题"iframe弹出框遮罩父类页面"正是关于这个技术点的讨论。在描述中...

    JQueryiframe页面操作父页面中的元素与方法(实例讲解)

    1）在iframe中查找父页面元素的方法：$(‘#id’, window.parent.document) 2）在iframe中调用父页面中定义的方法和变量：parent.methodparent.value 3）实例 1.父页面 代码如下:&lt;&#37;@ Page Language=”C#” ...

    利用JQuery操作iframe父页面、子页面的元素和方法汇总

    1. **在iframe中查找父页面元素**： ```javascript $('#id', window.parent.document) ``` 这段代码在`iframe`内部寻找ID为`id`的元素，`window.parent`指向父窗口的引用，`document`则表示父页面的文档对象。 ...

    jquery iframe动态添加删除tab选项卡

    jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe...

    iframe子父页面调用js函数示例.docx

    如果要在 iframe 子页面中取父页面中的标签中的值，可以使用 `window.parent.document.getElementById("test").value`，或者使用 jQuery 方法： ``` $(window.parent.document).contents().find("test").val(); ``` ...

    jquery tab 切换页面 支持iframe

    6. **跨域问题**：注意，由于浏览器的安全策略，`iframe`加载的页面必须与父页面同源，否则可能会遇到跨域限制。如果需要加载跨域内容，可以尝试使用`CORS`或其他解决方案，但这需要后端服务器的支持。 通过以上...

    jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码

    在本文中，我们将会探讨如何在jQuery环境下实现一个特定功能，即如何将iframe中的页面元素弹出并在父页面上全屏化。这个过程涉及到了多方面的技术细节，包括jQuery的基本使用、iframe的特性、全屏API的兼容性处理...

    jquery弹出层不关闭 父页面刷新

    在IT领域，尤其是在Web开发中，"jquery弹出层不关闭 父页面刷新"是一个常见的交互需求。这里，我们主要讨论如何使用jQuery实现这样的功能，即在一个弹出层（通常是一个模态对话框）显示时，用户可以操作父页面而不会...

    Jquery子页面获取父页面元素，子页面向父页面添加元素

    父页面动态的获取子页面的元素，以及弹出子页面的时候获取父页面的元素；

Magicbox
Global site tag (gtag.js) - Google Analytics