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

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


代码如下:

<iframe src="a.php" id="aa"></iframe>
<iframe src="b.php" id="bb"></iframe>
<input type="button" id="read-aa" value="读取iframe #aa">
<input type="button" id="write-aa" value="写入iframe #aa">

代码如下:

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

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

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

2、iframe跨父框架操作iframe


代码如下:

<!DOCTYPE html>
<meta charset="utf-8">
<title>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</title>
<script src="public/jQuery.js"></script>
<script>
$(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('<hr>这是bb.php操作aa.php写入的内容');
    });
});
</script>
<div>
这是iframe #bb里的内容
</div>
<input type="button" id="read-parent-aa" value="跨父读取iframe #aa">
<input type="button" id="write-parent-aa" value="跨父写入iframe #aa">

HTML：代码


代码如下:

<!DOCTYPE html>
<meta charset="utf-8">
<title>jQuery操作iframe</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<iframe src="a.php" id="aa"></iframe>
<iframe src="b.php" id="bb"></iframe>
<input type="button" id="read-aa" value="读取iframe #aa">
<input type="button" id="write-aa" value="写入iframe #aa">
<script>
$(function()
{
 $('#read-aa').click(function()
 {
  var v=$('#aa').contents().find('body').html();
  alert(v);
 });
 $('#write-aa').click(function()
 {

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

赞 (0)

相关推荐

  • jQuery操作DOM之获取表单控件的值

    本文实例讲述了jQuery操作DOM之获取表单控件的值.分享给大家供大家参考.具体分析如下: HTML属性与DOM属性差别最大的地方,恐怕就要数表单控件的值了.比如,文本输人框的 value属性在DOM中的属性叫defaultValue,DOM中就没有value属性.而选项列表(select) 元素呢,其选项的值在DOM中通常是通过selectedIndex属性,或者通过其选项元素的 selected属性来取得. 由于存在这些差异,在取得和设置表单控件的值时,最好不要使用.attr()方法.而对

  • jquery 操作DOM的基本用法分享

    例子展示: jquery代码: 复制代码 代码如下: <script language="javascript"> $(document).ready(function(){ alert($("ul li:eq(1)").text()); //选取第二个li的值 alert($("p").attr("title")); //选取p的title属性的值 //追加元素 $('ul').append("<

  • js/jQuery对象互转(快速操作dom元素)

    复制代码 代码如下: // jquery对象转js对象 $('#search')[0].checked=true; // js对象转jquery对象 var obj = document.getElementById('search'); alert($(obj).checked);

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

    frame目前还是比较流行的,许多地方都通过它来实现特殊的情况.比如说传统的上传.select在ie6下.代理.跨域等等.今天呢,简要的记述一下跨iframe的相关操作,主要是用jQuery操作DOM结构方面. 复制代码 代码如下: <iframe src="a.php" id="aa"></iframe> <iframe src="b.php" id="bb"></iframe>

  • jquery 操作DOM案例代码分享

    jquery 操作DOM案例代码分享

    实例如下: 复制代码 代码如下: <style type="text/css"> body{ margin:0; padding:40px; background:#fff; font:80% Arial, Helvetica, sans-serif; color:#555; line-height:180%; } img{border:none;} ul,li{ margin:0; padding:0; } li{ list-style:none; float:left;

  • NodeJS使用jQuery选择器操作DOM

    注* 这是一个两年多的"老"项目,可以让你在NodeJS中使用jQuery的选择器,像操作前端DOM一样操作后端的HTML/XML,在去除浏览器兼容相关代码后,比JSDOM的操作快8倍. 之前我们曾经提到JSDOM有严重的性能问题:   Debug调试Node.JS:我们是如何定位内存泄漏和无限循环的 cheerio 快速,灵活,在服务器端使用的jQuery. 简介 测试你的服务器端HTML: 复制代码 代码如下: var cheerio = require('cheerio'), $

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

    frame目前还是比较流行的,许多地方都通过它来实现特殊的情况.比如说传统的上传.select在ie6下.代理.跨域等等.今天呢,简要的记述一下跨iframe的相关操作,主要是用jQuery操作DOM结构方面. 复制代码 代码如下: <iframe src="a.php" id="aa"></iframe> <iframe src="b.php" id="bb"></iframe>

  • js和jquery实现监听键盘事件示例代码

    js和jquery实现监听键盘事件示例代码

    项目中要监听键盘组合键CTRL+C,以便做出对应的响应.查了一些方法但是其兼容性和稳定性不是很高,最终得到如下方法,经测试在Firfox.Chrome.IE中均可以使用. 一.使用javascript实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function keyListener(e

  • thinkphp跨库操作的简单代码实例

    实例一:配置config.php文件配置多个数据库配置 'DB_CONFIG2' => 'mysql://root:1234@localhost:3306/thinkphp', 控制器中调用方法: $New = M('表名','前缀没前缀不填写','DB_CONFIG2'); 这里相当于从新连接了数据库远程跨库如果是在同一个服务器数据库可以直接切换: $User = M('数据库名.表名','前缀没有可不填'); 实例二:Model模型中的跨库以下代码填写到模型类中 protected $con

  • vue组件中使用iframe元素的示例代码

    本文介绍了vue组件中使用iframe元素的示例代码,分享给大家,具体如下: 需要在本页面中展示vue组件中的超链接,地址栏不改变的方法: <template> <div class="accept-container"> <div class="go-back" v-show="goBackState" @click="goBack">GoBack</div> <ul&g

  • Python Learning 列表的更多操作及示例代码

    遍历列表-for循环 列表中存储的元素可能非常多,如果想一个一个的访问列表中的元素,可能是一件十分头疼的事.那有没有什么好的办法呢?当然有!使用 for循环 假如有一个食物名单列表,通过 for循环 将列表中的食物名称都打印出来 # 定义一个食物名单列表 foods = ['potato', 'tomato', 'noodles', 'apple', 'pizza'] # 循环访问foods列表 for food in foods: print(food) 输出: potato  tomato 

  • C++ I/O文件读写操作的示例代码

    IO: 向设备输入数据和输出数据C++的IO流 c++中,必须通过特定的已经定义好的类, 来处理IO(输入输出) 文件流: 对文件进行读写操作 头文件: 类库: ifstream 对文件输入(读文件) ofstream 对文件输出(写文件) fstream 对文件输入或输出 //写文件 #include <fstream> #include <iostream> #include <string> using namespace std; int main() { st

  • pyqt5 textEdit、lineEdit操作的示例代码

    1.定义一个textEdit/lineEdit:(lineEdit只需要将代码中的QTextEdit改为QLineEdit) self.textEdit = QtWidgets.QTextEdit(Dialog) self.textEdit.setGeometry(QtCore.QRect(70, 90, 171, 391)) self.textEdit.setObjectName("textEdit") self.textEdit.setReadOnly(True)#设置为只读,即可

  • C# 利用Selenium实现浏览器自动化操作的示例代码

    概述 Selenium是一款免费的分布式的自动化测试工具,支持多种开发语言,无论是C. java.ruby.python.或是C# ,你都可以通过selenium完成自动化测试.本文以一个简单的小例子,简述C# 利用Selenium进行浏览器的模拟操作,仅供学习分享使用,如有不足之处,还请指正. 涉及知识点 要实现本例的功能,除了要掌握Html ,JavaScript,CSS等基础知识,还涉及以下知识点: log4net:主要用于日志的记录和存储,本例采用log4net进行日志记录,便于过程跟踪

  • JAVA 实现磁盘文件加解密操作的示例代码

    简单实现了下: import javax.crypto.BadPaddingException; import javax.crypto.Cipher; import javax.crypto.KeyGenerator; import javax.crypto.SecretKey; import java.io.*; import java.security.GeneralSecurityException; import java.security.SecureRandom; /** * 文件

随机推荐