对iframe来说,父页面访问子页面的方法用得最多的是XXX.contentWindow和frames[YYY]这样都可以得到子页面,区别在于,XXX对应的是iframe的id属性值,而YYY对应的是iframe的name属性值
看下面的例子:
<html>
<head>
<script language="javascript" type="text/javascript">
<!--
function setValue(obj,iframe){
var $obj = getId(obj);
var $iframe = getId(iframe);
var getobj = $iframe.contentWindow.document.getElementById("getValue");
//var getobj = window.frames[iframe].document.getElementById("getValue");
if(!getobj){return}
else{
getobj.value = $obj.value;
}
}
function getValue(obj,iframe){
var $obj = getId(obj);
var $iframe = getId(iframe);
var setobj = $iframe.contentWindow.document.getElementById("setValue");
//var setobj = window.frames[iframe].document.getElementById("setValue");
if(!setobj){return}
else{
$obj.value = setobj.value;
}
}
然后再新建一个1.html里面加上一个<input name="" type="text" id="getValue">
和2.html,里面加上<input name="" type="text" id="setValue">
然后看看效果!~
function getId(id){
var $ = document.getElementById(id);
return $;
}
–>
</script>
</head>
<body>
<a href=”1.html” target=”iframe1″>跳到1.html</a>
<a href=”2.html” target=”iframe1″>跳到2.html</a><br>
<input name=”" type=”text” id=”parenttext” value=”把我传到子页面”>
<input type=”button” value=”父传子” onClick=”setValue(’parenttext’,'iframe1′)”>
<input type=”button” value=”子传父” onClick=”getValue(’parenttext’,'iframe1′)”><br>
<iframe id=”iframe1″ name=”iframe1″ frameborder=”0″ scrolling=”0″
style=”width:300px; height:150px; border:1px #009966 solid;”
src=”1.html”></iframe>
</body>
</html>
通常在很多情况下都会遇到通过js来传值的问题，只要通过一些页面关联，他们的值就可以互相传递
其中应用框架的时候传值问题可能会遇到更多一些
1、从父页面传值到子页面可能很容易办到，在很多情况下可以不通过js来传就可以达到目的，但从子页面把数据传给父页面就不是那么容易了，其实思路很简单，首先你要通过父页面找到子页面，按照W3C标准来，语法如下：
document.getElementById(”iframe1″).contentWindow;
取到子页面对象
2、此文为了达到一个很醒目的效果，做了一个很即时的例子，当鼠标选中子页面的任何文字的时候，父页面的text里面就把显示出来，通过
getSelection和selection.createRange方法来实现，关于selection.createRange是只能在ie6上面
能用，所以要加。
3、注：此实例牵涉到一个安全机制问题，以前很多浏览器都没考虑到过的，所以这个实例在一部分浏览器里面调试不起作用，但不用担心，你把代码放到自己的机子上试试，是得行的，也就是说这个跨服务器去执行这样的操作就会出问题。
<html> <head> <meta http-equiv="Content-Type"
content="text/html; charset=gb2312">
<title>无标题文档</title> </head> <body> <input
type="text" id="text1"><iframe src="http://www.uideas.cn/download/demo1.html
"
id="iframe1" name="iframe1" style="width:60%;
height:60%;"></iframe> </body> </html> <script
language="JavaScript"> var childHtml =
document.getElementById("iframe1").contentWindow; var parentText =
document.getElementById("text1"); var getValue = "";
if(childHtml.document.selection){
childHtml.document.onmouseup=function(){ parentText.value =
childHtml.document.selection.createRange().text; } }else{
childHtml.onmouseup=function(){
parentText.value=childHtml.window.getSelection(); }
}</script>
喜欢的朋友可以查考下。
分享到：
相关推荐
javascript父子页面传参方法，很简单的一个DEMO，大家可以看看哦。
本文实例讲述了JS简单实现父子窗口传值功能。分享给大家供大家参考，具体如下： 父窗口页面father.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE&...
ie+FF通用的父子模态对话框相互传值，已经自己验证过的，保证没有问题
看了官网上的api实现了官网的案例你会发现访问父页面中只能显示父页面中的内容，要想默认的在区域显示一个页面内容怎么办？ 自己案例代码： pages/parent.vue 父组件的页面的内容 <!-- 进行切换子页面...
主要给大家介绍了利用JS对iframe父子（内外）页面进行操作的方法教程，其中包括了怎么对iframe进行操作、在iframe里面控制iframe外面的js代码以及在父框架对子iframe进行操作等，需要的朋友可以参考借鉴。
1.我们最熟悉的父子组件传值 父->子 props 子->父 $emit 这些我们最常用的就不说了，如果有不理解的，俺这儿有篇不错的文章，链接奉上~ https://www.cnblogs.com/LoveAndPeace/p/7273648.html 2.兄弟组件或无关系...
A是父组件，B是子组件 ... navigationBarTitleText: 父子传值, usingComponents: { componentB: ../../components/son/son } } //父组件A js // view/father/father.js Page({ /** * 页面的初始数据 */
小程序父子间传值【以自定义头部导航栏为例】 前言： 小程序默认是用它自身的导航栏模板的，如果想用自己自定义的导航栏，就要在app.js中设置一下属性。 step1：创建自定义组件 1.1创建一个components文件夹，用于...
很多框架存在父子关系，操作起来十分麻烦，很多同学经常出现这样悲催的代码： 代码如下: window.parent.document.getElementById(“main”) .contentWindow.document.getElementById(‘input’).value = document....
③把有共同功能的抽取出来形成组件，这样代码可以更简洁，这里涉及到父子组件传值，父组件传值.sync，子组件 twoWay设置为true。 ④遇到bug一定要有耐心，一步步分析。 页面展示如下： （1）首页 这...
主要想说下非父子组件之间的通信。 项目场景： 在app.vue里写了一个公共的顶部导航navbar，然后右侧有个分享按钮，而这个分享按钮只有在特定的页面才展示，项目里是在lottery.vue页面，然后想实现app.vue里点击分享...
3、js跳转路由传参和标签传参，路由相同而参数不同时页面不做刷新的问题 22 总结： 22 第五节 嵌套路由（Children） 23 第六节 路由守卫 23 第五章 Vue全家桶各部分核⼼知识详解 24 第1节 构建vue项⽬的利器—脚⼿架...
如何传值在2个页面之间 ：要求不刷新父页面，并且不能用Querystring传值 Asp.net地址转义（分析）加强版 Web的桌面提醒（Popup） Using the Popup Object Click button only once in asp.net 2.0 Coalesys PanelBar ...
travelA Vue.js projectgit clonecnpm installcd travelyarn startserve with hot reload at localhost:8080build for production with minificationyarn build使用的是mock数据 axios接收完成主页面 轮播 内容轮播 ...