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

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

CC++C#HTMLjQuery 
阅读更多
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>
分享到：
| 世界上最短的IE判定代码
评论
发表评论

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

相关推荐

    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）。...

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