`
xiaoboss
  • 浏览: 650796 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

JQuery操作iframe父页面与子页面的元素与方法

阅读更多
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>
分享到:
评论

相关推荐

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

    不过,当iframe和父页面属于同一域时,可以通过JavaScript或jQuery来操作父页面中的元素和方法。本文将详细介绍如何使用jQuery来查找和操作iframe父页面中的元素和方法。 首先,需要明确iframe元素可以被视为一个...

    jquery、js调用iframe父窗口与子窗口元素的方法整理.docx

    jquery、js调用iframe父窗口与子窗口元素的方法整理 在Web开发中,iframe是一个常用的技术,用于在一个HTML文档中嵌入另一个HTML文档。然而,在使用iframe时,经常会遇到一个问题:如何在iframe中访问父窗口的元素...

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

    "iframe父页面与子页面通信及相互调用方法"是一个重要的主题,涉及到跨域安全、DOM操作以及JavaScript/jQuery的交互技术。下面将详细解释这一知识点。 1. **基本概念** - **父页面(Parent Page)**:包含`iframe`...

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

    JQUERY IFRAME下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS与可以实现。 第一、在iframe中查找父页面元素的方法:$(‘#id’, window.parent.document) 第二、在父页面中获取iframe中的元素方法:$(this)...

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

    接下来是关于在JQuery中和JavaScript中,如何在父页面与子页面间进行元素的互相操作: 1. **jQuery 在iframe子页面获取父页面元素**: ```javascript $("#objid", parent.document) ``` 使用`parent.document`...

    jquery、js调用iframe父窗口与子窗口元素的方法整理

    以上就是jQuery和JavaScript调用iframe父窗口与子窗口元素的方法。在实际应用中,要注意跨域问题,如果父页面和iframe的源不同,它们之间的交互可能会受到浏览器同源策略的限制。此外,确保正确引用jQuery库,并且在...

    JQUERY实现iframe页面切换功能

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

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

    在网页开发中,有时我们需要实现子页面在父页面中打开的功能,这在多窗口或框架结构的应用中尤其常见。jQuery库作为一个强大的JavaScript工具集,能够简化这种操作,使得无需依赖基础的jQuery类库就能实现这一功能。...

    easyUi弹出window窗口传值与调用父页面的方法,子页面给父页面赋值

    在EasyUI中,我们可能会遇到需要在弹出窗口(子页面)与父页面之间进行数据传递或调用父页面方法的需求。下面将详细讲解这个过程。 首先,让我们理解标题中的“弹出window窗口传值”。在EasyUI中,创建一个弹出窗口...

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

    这些方法可以在实际项目中应用,例如在父页面中调用 iframe 子页面的 js 函数来实现某些操作,或者在 iframe 子页面中调用父页面的 js 函数来实现某些操作。 相关知识点 1. iframe 子父页面调用 js 函数的示例 2. ...

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

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

    Jquery方式获取iframe页面中的 Dom元素

    需要注意的是,使用jQuery操作iframe中的DOM时,必须确保iframe已经完全加载完毕,否则可能无法正确获取其内部的DOM元素。为了处理这种情况,通常我们会将相关操作放在iframe的“load”事件中或者在window的“load”...

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

    接下来,假设你有一个`iframe`元素,其`id`为`myIframe`,你可以在`iframe`内的子页面中编写JavaScript代码来响应按钮点击事件,并触发隐藏`iframe`的操作。在子页面的`&lt;body&gt;`标签中,添加一个按钮元素,并为其绑定...

    iframe父页面获取子页面参数的方法

    总之,理解如何在父页面中获取`iframe`子页面的元素值是Web开发中的一个重要技能,这涉及到DOM操作、JavaScript的跨窗口通信以及对同源策略的理解。在实际应用中,开发者还需要根据具体需求和安全考虑来灵活运用这些...

    jquery 跨iframe拖拽

    本篇文章将详细探讨"jquery 跨iframe拖拽"这一主题,该技术允许用户在不同的IFrame之间进行元素的拖放操作,这对于构建多窗口、多面板的Web应用尤其有用。 首先,我们要理解IFrame(内联框架)的概念。IFrame是一种...

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

    在网页开发中,有时我们需要在`iframe`子页面与父页面之间进行交互,例如获取或操作对方的DOM元素。这通常涉及到跨文档通信,因为`iframe`子页面被视为一个独立的文档,它有自己的窗口对象和文档对象模型(DOM)。...

Global site tag (gtag.js) - Google Analytics