当前位置:  编程技术>WEB前端

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

    来源: 互联网  发布时间:2014-08-25

    本文导语:  frame目前还是比较流行的,许多地方都通过它来实现特殊的情况。比如说传统的上传、select在ie6下、代理、跨域等等。今天呢,简要的记述一下跨iframe的相关操作,主要是用jQuery操作DOM结构方面。 代码如下: 代码如下:$('#read-a...

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

代码如下:






代码如下:

$('#read-aa').click(function()
{
    var v=$('#aa').contents().find('body').html();
    alert(v);
});
$('#write-aa').click(function()
{

    $('#aa').contents().find('div').append('这是index.php操作aa.php写入的内容');
});

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

2、iframe跨父框架操作iframe

代码如下:



bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb


$(function()
{
    $('#read-parent-aa').click(function()
    {
        var v=$('body',parent.document).find('#aa').contents().find('body').html();
        alert(v);
    });
    $('#write-parent-aa').click(function()
    {
        $('body',parent.document).find('#aa').contents().find('div').append('这是bb.php操作aa.php写入的内容');
    });
});


这是iframe #bb里的内容




HTML:代码
代码如下:



jQuery操作iframe






$(function()
{
 $('#read-aa').click(function()
 {
  var v=$('#aa').contents().find('body').html();
  alert(v);
 });
 $('#write-aa').click(function()
 {

  $('#aa').contents().find('div').append('这是index.php操作aa.php写入的内容');
 });
});


    
 
 

您可能感兴趣的文章:

  • Jquery each方法跳出循环,并获取返回值(实例讲解)
  • 使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
  • Jquery ajaxStart()与ajaxStop()方法(实例讲解)
  • jquery遍历select元素(实例讲解)
  • jQuery:delegate中select()不起作用的解决方法(实例讲解)
  • Jquery动画animate方法的实例讲解
  • Jquery使用Firefox FireBug插件调试Ajax步骤讲解
  • jquery获取css中的选择器(实例讲解)
  • jquery使用jquery.zclip插件复制对象的实例教程
  • JQuery验证特殊字符实例
  • jquery检验实例-改变错误提示信息的位置
  • textarea显示成label的样式 jquery实例
  • jQuery实现回车键(Enter)切换文本框焦点的代码实例
  • jquery修改属性值实例代码(设置属性值)
  • jquery等宽输出文字插件的实例代码
  • jquery 回车事件的实例分享
  • jquery 获取dom固定元素 添加样式的简单实例
  • Jquery 获取元素位置序号的实例代码
  • jquery获得表单所有数据的实例分享
  • jQuery回车键事件实例代码
  • Jquery 键盘按键监听与滑动效果的实例
  • jquery实现弹出div,始终显示在屏幕正中间的简单实例
  • jquery导航固定效果实例
  • jquery 延迟执行的实例分享
  • JQuery validate日期比较实例
  • Jquery如何获取新浪天气预报?实例代码
  • jquery 网页自动播放声音实例
  • jquery easyui datagrid合计行实例代码
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jquery下拉select控件操作方法分享(jquery操作select)
  • Cookie操作插件 jQuery.Cookie
  • jquery链式操作、链式写法的小例子
  • 利用js(jquery)操作Cookie的方法说明
  • jQuery操作select option选项(增加 删除 修改)
  • jquery常用操作小结
  • JQuery操作DOM的笔记
  • jquery链式操作的正确使用方法
  • jQuery操作select下拉框的text值和value值的方法
  • JQuery 文本框操作的4个小例子
  • jquery加载完iframe的内容后才进行下一步操作的实现方法
  • jquery操作单选框radio的例子
  • 使用jquery实现IE下按backspace相当于返回操作
  • jquery cookie插件用法 jquery操作cookie的例子
  • 解决jquery操作checkbox火狐下第二次无法勾选问题
  • jquery操作checkbox示例分享
  • Jquery操作radio的小例子
  • jquery操作checkbox实现全选和取消全选
  • Jquery操作html标签及动态添加验证的例子
  • Jquery操作radio的简单实例
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery圆角插件 jQuery Corners
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3