Iframe之间传值

最新推荐文章于 2024-07-19 16:10:40 发布
最新推荐文章于 2024-07-19 16:10:40 发布
阅读量1k 收藏
点赞数

  Iframe之间传值和数据, 因为页面对像的不同, 一个ifram页面中的form值和数据直接get或Post都是传不到 另一个iframe页面的, 设置taget也没有用,  在网上找了很久 没有很好的方法. 只有通过js来实现. 

   两个重要的javascript语句:

top.result.document.location='result.html?data=' + data;

和

window.top.frames['result'].document.getElementById("an").innerHTML=data;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>框架页面</title> 
</head>
<body>
<iframe width="100%" height="100" name="find" id="find" src="find.html"></iframe>
<iframe width="100%" height="600" name="result" id="result" src="result.html"></iframe>
</body>
</html>
 

查询页面-find.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>查询页面</title>
<script language="javascript"  type="text/javascript">
function show(){
var data = document.form1.data.value; 
top.result.document.location='result.html?data=' + data;
//window.top.frames['result'].document.getElementById("an").innerHTML=data;
}
</script>
</head>
<body>
<div >
  <form name="form1" method="post" >
        <p><span>数据：</span>
          <input type="text" name="data" class="text" id="text1"/>
        </p>
        <p>
     <input   type="submit" value="提交" οnclick="javascript:show();" />
        </p>
  </form>
</div>
</body>
</html>

结果页面-result.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>结果页面</title>
</head>
<body>
<p>上面输入的文字是: <span id="an">&nbsp;</span></p>
</body>
<script language="javascript"  type="text/javascript">
function Request(argname)
{
    var url = document.location.href;
    var arrStr = url.substring(url.indexOf("?")+1).split("&");
    //return arrStr;
    for(var i =0;i<arrStr.length;i++)
        {
        var loc = arrStr[i].indexOf(argname+"=");
       
        if(loc!=-1)
            {
            return arrStr[i].replace(argname+"=","").replace("?","");
            break;
            }
        }
    return "";
}
//使用Request("argname")即可得到参数值;
var data=Request("data"); 
this.document.getElementById('an').innerHTML= data;
</script>
</html>
Samuel_esssy
关注
Iframe窗体之间相互传值
09-06
父子窗体之间传值iframe之间的相互操作，还有sturts2指定跳转的页面。
关于Iframe之间以及与父窗体的值传递
weixin_33670713的博客
06-09 150
自己实现过了的,javascript脚本关于Iframe之间以及与父窗体的值传递,事件调用问题; 在父页面访问Iframe子窗体的txtAddress控件window.frames["ifrMapCompanyDetails"].document.all("txtAddress").value = '地址' ; 在Iframe子窗体1访问父页面的TextBox1控件 , 子窗体1把值赋给...
iframe传递参数，两个iframe之间传值方法
最新发布
web前端开发博客
07-19 1063
iframe传递参数，Vue项目中使用iframe及传值，最近做了一个这样的业务处理，在uniapp 项目中使用第三方页面，需要在当前的页面中把一些数据传给第三方，第三方处理后返回一些数据给当前页面，后续其他的操作会用到当前的数据。这样就基本完成了iframe 父子页面之间的数据交互，上面只是个简单的示例，遇到了就写的记录下，具体业务开发的时候还是需要处理下，比如传递参数的时候可以把参数加密下，如果传递的参数比较敏感直接编码发送不好，常用的aes或者base64等，或者可以多层加密。,转载请保留本文地址！
iframe 传值
mazhipeng888的专栏
03-01 420
父窗体： html代码： ------------------ <iframe id="content" style="width: 100%; height: 100%;" frameborder="0" scrolling="yes" src="about:blank"></iframe> js代码： var $ifr = $('#content'); 调用子窗体方法： $ifr[0].contentWindow.next(); // next()为子窗体方
iframe之间传值
cindysaj的专栏
11-24 175
Problem: AA.html中有一ID为: content 的文本域(textarea), BB.html中的一段js来给AA.html中ID为: content 的文本域赋值 solution: 1, main.html 2,AA.html 3,BB.html ...
JS中Iframe之间传值的方法
12-07
1.在iframe子页面中获取父页面的元素：  a>window.parent.document这个是获取父页面document中的对象；  b>如果要获取父页面js中的方法：window.parent.xxxx（）；xxxx()为方法； 2.在父页面中获取iframe子页面中...
javascirpt实现2个iframe之间传值的方法
12-28
本文实例讲述了javascirpt实现2个iframe之间传值的方法。分享给大家供大家参考，具体如下： index.htm <body> <td width=100%><iframe src=iframe1.htm name=aa></iframe> ...
JS中Iframe之间传值及子页面与父页面应用
10-27
然而，当涉及到`<iframe>`之间的通信时，即值的传递和页面间的交互，就需要一些特别的技术来处理。本文将深入探讨如何在JS中进行`<iframe>`间的值传递以及子页面与父页面的交互。 首先，让我们理解如何在子页面中...
iframe传递参数
weixin_49232311的博客
05-26 707
console.log(event.data.params, "参数值");console.log(event, "事件");1、iframe父页面发送数据和接受数据。2、子页面接受数据和发送数据。
iframe相关传值
小芳的专栏
07-30 387
前言： 最近写了几个简单的弹窗，iframe从主角-到渐渐低调，最近好像又变的高调起来。因为他在某些地方确实很方便。 就比如说最近有个需求：要求把公共的弹窗放到一个单独的页面中，并且在其他地方要求以iframe的形式引入过来。虽然不知道为什么这样要求。客户就是上帝，开做呗！废话不多说上代码。 主页面A： 代码： <iframesrc="B.html"frameborder="0"name="smIframe"id="smIframe"width="100%"height="...
js 实现iframe 之间传值
07-12
js 实现iframe 之间传值
页面中iframe相互传值传参
10-29
兼容IE和火狐JS父窗口调用iframe里面的对象、函数的方法
iframe 之间如何传值
secret_killer的专栏
10-24 617
a中的 frame 为 scrolling="no" src="b.jsp"> b中有个 textbox控件  点击a中的按钮b中的textbox的值即为XXX
两个iframe之间传值
weixin_30824277的博客
07-30 244
例如：点击后会把另一个iframe中的值得到弹出 Main： <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> </head> &...
iframe传值方式
YhWyl527的博客
09-28 741
1
iframe 与 h5 或 其他vue页面传值，详解传递参数的方法和技巧
sun_jinlin的博客
05-13 3210
在网页开发中，我们经常会使用iframe标签来嵌入其他网页或者文档。而iframe传值则是指在嵌入的iframe中传递参数的一种技术。通过传递参数，我们可以在嵌入的iframe中获取到父页面传递过来的数据，从而实现不同页面之间的数据交互。
使用 iframe + postMessage 实现跨域通信
weixin_30604651的博客
06-28 922
在实际项目开发中可能会碰到在 a.com 页面中嵌套 b.com 页面，这时第一反应是使用 iframe，但是产品又提出在 a.com 中操作，b.com 中进行显示，或者相反。 1、postMessage   postMessage方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。 语法： otherWindow.postMessage(mess...
Iframe标签的传值方式
m0_56260119的博客
02-16 3795
一、iframe标签的使用 <iframe style={{border:0,width:"100%",height:630,}} src={src} /> 如何进行消息通信（父发给子，子接收父的消息； 子发给父，父接收子的消息） 方法一： 直接通过获取父或者子的window来操作 （限制： 必须同域） // 父调用子的方法： this.iframe.contentWindow.iframe的属性方法 // 或 document.getElementById("myIframe.
jqery iframe 对话框传值
05-27
在使用 jQuery UI 的对话框组件时，你可以通过在对话框中嵌入一个 iframe 来显示另一个页面，并通过 iframe 与父窗口之间的通信来传递数据。具体步骤如下： 1. 在父窗口中，创建一个包含 iframe 的对话框。 ``` $...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值