jquery获得同源iframe内body下标签的值的方法


Posted in Javascript onSeptember 25, 2014

test.html

Html代码

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jquery</title> 
<style type="text/css"> 
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function (){ 
$("#show").click(function (){ 
var iframeObj = $(window.frames["iframe_name"].document); 
alert(iframeObj.find("#un").val()); 

}); 

}); 
</script> 
</head> 
<body> 
<input type="button" id="show" value="show" /> 
<iframe id="iframe_id" name="iframe_name" src="http://localhost/test/login.html"></iframe> 
</body> 
</html>

login.html

Html代码

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>登录页面</title> 
</head> 
<body> 
<form method="POST" action="#"> 
用户名:<input id="un" type="text" name="username" value="123d" /> 
密 码:<input type="text" name="password"/> 
<input type="submit" value="提交"> 
</form> 
</body> 
</html>

注意:必须同源

Javascript 相关文章推荐
Cookie 注入是怎样产生的
Apr 08 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
Aug 22 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
Mar 04 Javascript
详细解密jsonp跨域请求
Apr 15 Javascript
js实现表单多按钮提交action的处理方法
Oct 24 Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 Javascript
node.js插件nodeclipse安装图文教程
Oct 19 Javascript
Bootstrap 源代码分析(未完待续)
Aug 17 Javascript
jquery图片放大镜效果
Jun 23 jQuery
详解使用React全家桶搭建一个后台管理系统
Nov 04 Javascript
配置eslint规范项目代码风格
Mar 11 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
Apr 04 Javascript
jquery 实现两Select 标签项互调示例代码
Sep 25 #Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
Sep 25 #Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
Sep 25 #Javascript
javascritp添加url参数将参数加入到url中
Sep 25 #Javascript
jQuery将多条数据插入模态框的示例代码
Sep 25 #Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
Sep 25 #Javascript
jquery动态分页效果堪比时光网
Sep 25 #Javascript
You might like
简单示例AJAX结合PHP代码实现登录效果代码
2008/07/25 PHP
PHP生成随机用户名和密码的实现代码
2013/02/27 PHP
Memcached常用命令以及使用说明详解
2013/06/27 PHP
php使用sql数据库 获取字段问题介绍
2013/08/12 PHP
详谈PHP程序Laravel 5框架的优化技巧
2016/07/18 PHP
xml转json的js代码
2012/08/28 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
javascript基本算法汇总
2016/03/09 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
关于Webpack dev server热加载失败的解决方法
2018/02/22 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
这样回答继承可能面试官更满意
2019/12/10 Javascript
[04:44]显微镜下的DOTA2第二期——你所没有注意到的细节
2014/06/20 DOTA
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
python读取Excel实例详解
2018/08/17 Python
python版本五子棋的实现代码
2018/12/11 Python
python async with和async for的使用
2019/06/20 Python
Python面向对象封装操作案例详解 II
2020/01/02 Python
python 实现的IP 存活扫描脚本
2020/12/10 Python
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
汉语专业应届生求职信
2013/10/01 职场文书
会计岗位职责
2013/11/08 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
教代会开幕词
2015/01/28 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书
2016三八妇女节慰问信
2015/11/30 职场文书
中秋节英文祝福语句(14句)
2019/09/11 职场文书
Pytorch实现图像识别之数字识别(附详细注释)
2021/05/11 Python
vue实现滑动解锁功能
2022/03/03 Vue.js