`
m635674608
  • 浏览: 5028433 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

同域jQuery（跨）iframe操作DOM

    博客分类：
  • js
 
阅读更多

frame目前还是比较流行的，许多地方都通过它来实现特殊的情况。比如说传统的上传、select在ie6下、代理、跨域等等。今天呢，简要的记述一下跨iframe的相关操作，主要是用jQuery操作DOM结构方面。

 

[javascript] view plaincopy
  1. <iframe src="a.php" id="aa"></iframe>   
  2. <iframe src="b.php" id="bb"></iframe>   
  3. <input type="button" id="read-aa" value="读取iframe #aa">   
  4. <input type="button" id="write-aa" value="写入iframe #aa">  

[javascript] view plaincopy
  1. $('#read-aa').click(function()   
  2. {   
  3.     var v=$('#aa').contents().find('body').html();   
  4.     alert(v);   
  5. });   
  6. $('#write-aa').click(function()   
  7. {   
  8.     
  9.     $('#aa').contents().find('div').append('<hr>这是index.php操作aa.php写入的内容');   
  10. });  


主要方法是 contents()，读取iframe。

 

2、iframe跨父框架操作iframe

[javascript] view plaincopy
  1. <!DOCTYPE html>   
  2. <meta charset="utf-8">   
  3. <title>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</title>   
  4. <script src="public/jQuery.js"></script>   
  5. <script>   
  6. $(function()   
  7. {   
  8.     $('#read-parent-aa').click(function()   
  9.     {   
  10.         var v=$('body',parent.document).find('#aa').contents().find('body').html();   
  11.         alert(v);   
  12.     });   
  13.     $('#write-parent-aa').click(function()   
  14.     {   
  15.         $('body',parent.document).find('#aa').contents().find('div').append('<hr>这是bb.php操作aa.php写入的内容');   
  16.     });   
  17. });   
  18. </script>   
  19. <div>   
  20. 这是iframe #bb里的内容   
  21. </div>   
  22. <input type="button" id="read-parent-aa" value="跨父读取iframe #aa">   
  23. <input type="button" id="write-parent-aa" value="跨父写入iframe #aa">  


HTML：代码

[javascript] view plaincopy
  1. <!DOCTYPE html>  
  2. <meta charset="utf-8">  
  3. <title>jQuery操作iframe</title>  
  4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  
  5. <iframe src="a.php" id="aa"></iframe>  
  6. <iframe src="b.php" id="bb"></iframe>  
  7. <input type="button" id="read-aa" value="读取iframe #aa">  
  8. <input type="button" id="write-aa" value="写入iframe #aa">  
  9. <script>   
  10. $(function()  
  11. {  
  12.     $('#read-aa').click(function()  
  13.     {  
  14.         var v=$('#aa').contents().find('body').html();  
  15.         alert(v);  
  16.     });  
  17.     $('#write-aa').click(function()  
  18.     {  
  19.           
  20.         $('#aa').contents().find('div').append('<hr>这是index.php操作aa.php写入的内容');  
  21.     });  
  22. });  
  23. </script>  


 

分享到：
| Can't find bundle for base name configu ...
评论
发表评论

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

相关推荐

    jquery 跨iframe拖拽

    "jquery 跨iframe拖拽"的核心在于利用jQuery的拖拽插件（如jQuery UI的draggable/droppable）以及DOM操作和事件处理来实现跨IFrame通信。下面我们将分步骤解析这个过程： 1. **引入jQuery和jQuery UI**：在项目中，...

    同域jQuery(跨)iframe操作DOM(实例讲解)

    本文主要讲解了在同域环境下使用jQuery进行跨iframe操作DOM的实例。iframe是一种在网页中嵌入另一个网页的HTML标签，它允许一个页面内嵌套另一个独立的页面。这种技术在很多情况下被广泛使用，例如在实现上传功能、...

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

    在具体的实现过程中，需要注意iframe中的内容必须和主页面出于同一个域中，否则会受到浏览器同源策略的限制，无法获取到其中的DOM元素。这是因为浏览器安全策略不允许跨域访问DOM。 首先，确保iframe元素在HTML页面...

    同域jQuery(跨)iframe操作DOM(示例代码)

    这个场景通常涉及到jQuery对iframe的同域操作。同域意味着iframe的源URL与包含它的页面在同一域名下，这允许我们使用JavaScript和jQuery来交互数据和修改DOM。本文将详细解释如何利用jQuery在同域环境下进行iframe的...

    JQUERY实现iframe页面切换功能

    在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了JavaScript的DOM操作，事件处理，动画设计以及Ajax交互。本篇文章将详细讲解如何利用jQuery实现iframe页面的切换功能，以便于创建更丰富的用户...

    jquery 插件 图片浏览 支持跨iframe

    jQuery作为一个强大的JavaScript库，提供了丰富的功能来简化DOM操作、事件处理、动画效果以及Ajax交互。其中，jQuery插件是扩展其功能的重要方式，允许开发者创建自定义的组件以满足特定需求。在给定的标题和描述中...

    跨frame操作dom元素

    例如，jQuery的`contents()`方法可以获取iframe的文档对象，然后可以像操作常规DOM一样操作其中的元素。 了解了这些技术后，开发者可以更灵活地处理多frame环境下的交互需求。不过，要注意跨域安全问题，尤其是在...

    jQuery-1.8.3(&2.1.4).min.js&jquery;.fileupload&jquery;.iframe-transport

    在IT领域，JavaScript库jQuery无疑是一个极其重要的存在，以其简洁的API和强大的功能，极大地简化了DOM操作、事件处理、动画制作以及Ajax交互等任务。本篇将深入探讨jQuery的核心库以及两个重要的插件——jQuery ...

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

    在使用jQuery进行操作时，需要注意的是jQuery本身并不提供跨iframe域的直接支持。因此，这里提到的方法和实例都基于同源策略，即父页面和iframe页面属于同一域名。如果尝试在不同源的iframe中操作元素，将会遇到跨域...

    JQuery跨Iframe选择实现代码

    $(‘#btnCancel’,$(‘#PopFrame’)[0].contentWindow.document) 从iframe页面中选择父页面中的元素： 代码如下: $(“#PopContainer”,parent.document) 以下内容是别的网友的解决方法：只好用DOM方法与jquery方法...

    Jquery实现iframe功能

    总的来说，使用jQuery实现iframe功能主要是通过选择器和DOM操作来改变iframe的属性，以及监听其加载事件。在实际应用中，可以根据需求扩展这些基本功能，例如添加错误处理、实现iframe内容的交互等。

    jquery对iframe自适应高度插件

    2. **高度计算**：通过DOM操作获取`iframe`的子元素高度，确保包括了所有可视内容。 3. **动态调整**：将计算出的高度应用于`iframe`的样式，设置其`height`属性，从而实现自适应。 4. **重试机制**：考虑到某些情况...

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

    在本例中，我们将利用`jQuery`的事件处理和DOM操作功能。 要隐藏父页和引用页中的`iframe`，我们首先需要确保`jQuery`库已经被引入到你的HTML文件中。通常，我们会通过在`&lt;head&gt;`标签内添加以下代码来引入`jQuery`...

    Jquery取得Iframe中元素的几中方法

    在网页开发中，jQuery 是一个非常强大的 JavaScript 库，它简化了 DOM 操作、事件处理以及动画效果。当涉及到在页面中嵌入 iframe (内联框架) 的情况时，jQuery 提供了一些方法来帮助我们方便地访问和操作 iframe 中...

    jquery操作 iframe的方法

    jQuery作为一款成熟的JavaScript库，为开发者提供了多种操作iframe的方法，极大地简化了在不同浏览器中对iframe进行DOM操作的复杂性。iframe元素用于在网页中嵌入另一个HTML页面，其独立的文档环境允许在父页面中...

    html5 跨iframe的拖拽实现移动端页面设计器

    `jquery.js`是基础的jQuery库，用于简化DOM操作和事件处理。`draggable.js`可能是一个自定义的插件，扩展了jQuery UI的拖放功能，以适应跨iframe的需求。 实现跨iframe拖放的基本步骤如下： 1. 在主页面（可能是`...

    jQuery获取iframe的document对象的方法

    在网页开发中，有时我们需要对嵌入的`iframe`（Inline Frame）中的内容进行操作，例如修改DOM元素、触发事件等。为了实现这样的功能，我们需要首先获取到`iframe`的`document`对象，因为`document`对象是HTML文档的...

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