iframe传值(iframe传递参数)
大家好，iframe传值相信很多的网友都不是很明白，包括iframe传递参数也是一样，不过没有关系，接下来就来为大家分享关于iframe传值和iframe传递参数的一些知识点，大家可以关注收藏，免得下次来找不到哦，下面我们开始吧！
iframe 子页面JS如何调用父页面全局变量
1、在父页面访问Iframe子窗体的txtAddress控件
window.frames["ifrMapCompanyDetails"].document.all("txtAddress").value='地址';
2、在Iframe子窗体1访问父页面的TextBox1控件,子窗体1把值赋给子窗体2的某个控件
string strValue="从子窗体传递给父页面的值";
下面是在Page_Load事件里面调用的,当然可以写在javascript脚本里面
this.Response.Write("<script>parent.document.all('TextBox1').value='"+ strValue+"';</script>");
this.Response.Write("<script>if( parent.document.all('TextBox2').value='0')parent.document.all('TextBox1').value='44';</script>");
3、子窗体访问父窗体中的全局变量：
parent.xxx;
4、在Iframe子窗体1访问子窗体2的txtAddress控件子窗体1把值赋给子窗体2的某个控件
window.parent.frames["ifrMapCompanyDetails"].document.all("txtAddress").value='地址';
父窗体提交两个Iframe子窗体
window.frames["ifrMapCompanyDetails"].Form1.submit();
window.frames["ifrMapProductInfoDetails"].Form1.submit();
Iframe子窗体调用父页面的javascript事件
window.parent.XXX()
//父页面调用当前页面中IFRAME子页面中的脚本childEvent
function invokechildEvent()
{ var frm= document.frames["ifrChild1"].childEvent();}
或者调用当前页面中第一个IFRAME中的脚本childEvent
{ var frm= document.frames[0]; frm.childEvent();}
//子页面调用父窗体的某个按钮的按钮事件
window.parent.Form1.btnParent.click()
父页面调用子窗体的某个按钮的按钮事件
window.frames['ifrChild1'].document.all.item("btnChild3").click();
//jquery部分：
1.在父窗口中操作选中IFRAME中的所有单选钮
$(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");
2.在IFRAME中操作选中父窗口中的所有单选钮
$(window.parent.document).find("input[@type='radio']").attr("checked","true");
开发中iFrame表单提交的古怪问题解决
微软的 NET Framework自带了Ajax框架将以往传统的ASP NET开发带入了一个全新的Ajax NET开发时代我们除了在页面上引入ScriptManager控件用以在客户端注册功能丰富的Ajax框架脚本外这个庞大的框架还提供了诸多功能强大的Ajax控件例如著名的UpdatePanel ModalPopupExtender Rating等控件 Ajax框架和控件的引入大大简化了开发人员的开发任务同时也给用户带来了全新的Web体验但是我们在使用复杂的框架提供的脚本时也常常会遇到这样或那样的问题有很多问题相信不少开发人员都能独立解决不过有些复杂的问题还真是很伤脑筋
本来在MOSS中使用Ajax开发就已经不是一件轻易的事情或许高手们觉得这没有什么是的！我们在Google上会搜到很多介绍这方面的文章而且配置步骤都写得非常详细按照前辈们的经验只要认真按照步骤将环境配置好一般都是没有什么问题的在MOSS中开发Ajax应用程序就如同简单的Ajax网页一样只是部署的时候稍微要麻烦一些这里我不想详细讲解在MOSS中如何进行Ajax开发只是想说一说前段时间在MOSS开发中因为Ajax框架所引起的一个非常怪异的问题一直困扰了我好几天不过最终算是委曲求全得找到了一个替代的解决办法至于会不会引起其它的什么问题读者也可以帮我分析一下
前不久我写了一篇有关在FireFox中通过脚本获取客户端本地所选文件路径的文章里面介绍了通过客户端上传文件时如果通过javascript得到文件的本地路径事实上在真正的文件上传过程中得到文件的客户端路径意义是不大的除非我们需要实现如图片本地预览的功能否则我们一般都可以通过Form的Post方法得到要上传的文件在C#一般都是这样的
<body><form id= form runat= server method= post enctype= multipart/form data><input id= File name= mtfile type= file/><asp:Button ID= Button runat= server Text= Button OnClick= Button _Click/></form></body>
protected void Button _Click(object sender EventArgs e){ HttpFileCollection files= Request Files; if(files!= null&& files Count>){ for(int i=; i< files Count; i++){// TODO something}}}设置Form的method属性为post并设置enctype为mulipart/form data当页面提交时在服务端通过Request Files方法即可得到上传文件的对象集合非常简单我们根本不需要在客户端通过javascript得到文件的路径不过这里有一个限制那就是页面必须post到服务端才能得到要上传的文件也就是说我们不能通过javascript方式在页面无刷新的情况下将文件上传到服务器这也是Ajax唯一不能做到的一件事情不过我们通过一个比较老旧的技术可以避开这个问题那就是在页面上使用隐藏的iFrame在页面提交前将Form的target指向这个隐藏的iFrame页面提交时iFrame会被刷新提交从而避免了整个页面被刷新
事实上在Ajax兴起前很多无刷新的页面几乎都是通过这种方式来实现的 iFrame可以提交数据而且还避免了网页的整体刷新在Ajax兴起后 iFrame似乎很少再被人们提起但是有一个例外
那就是文件上传！我们可以去当今比较流行的网站考察一下像邮箱 Gmail等都无一例外地使用了iFrame上传文件我们可以将上面代码中的HTML部分稍作修改就可以实现使用iFrame上传文件的功能
<body><form id= form runat= server target= ifu method= post enctype= multipart/form data><iframe frameborder= id= ifu name= ifu></iframe><input id= File name= mtfile type= file/><asp:Button ID= Button runat= server Text= Button OnClick= Button _Click/></form></body>后台代码不变只是在Form上加了一个target属性用来指向iFrame当页面提交时会自动提交iFrame对象而不会将Form本身提交当遇到页面上还有其它表单需要提交时我们可以这样做先在提交按钮的客户端事件上将Form的target指向隐藏的iFrame然后返回True提交表单这时iFrame会被提交在服务端处理完数据保存后注册一段脚本用来将iFrame的父页面中Form的target改回自身这样就可以模拟一次iFrame提交而不会影响到页面上其它的功能我们只是在页面需要被提交时才去修改Form的target属性提交完后再改回来
这看起来似乎是一个很不错的主意看看代码吧！
<body><form id= form runat= server method= post enctype= multipart/form data><iframe frameborder= id= ifu name= ifu></iframe><input id= File name= mtfile type= file/><asp:Button ID= Button onclientclick= document forms[ form ] target= ifu;return true; runat= server Text= Button OnClick= Button _Click/></form></body>
protected void Button _Click(object sender EventArgs e){ HttpFileCollection files= Request Files; if(files!= null&& files Count>){ for(int i=; i< files Count; i++){//TODO something}} string script= alert({});window parent document forms[ form ] target= _self;; ClientScript RegisterClientScriptBlock(this Page this GetType() string Empty string Format(script Save Successfully!) true);}
尽管我们在页面上使用Ajax控件该方法仍然会奏效需要说明一点就是上传文件的功能是不能在UploadPanel控件中使用的否则功能会失效因为文件上传必须刷新页面除非我们使用iFrame提交表单如果非要在UpdatePanel控件中完成文件上传功能那必须设置UpdatePanel控件的PostBackTrigger属性将触发事件的控件添加到PostBackTrigger中如
<asp:UpdatePanel ID= update runat= server UpdateMode= Conditional><ContentTemplate><input id= File name= mtfile type= file/><asp:Button ID= btSave runat= server Text= Save onclick= btSave_Click/></ContentTemplate><Triggers><asp:PostBackTrigger ControlID= btSave/></Triggers></asp:UpdatePanel>
这将导致页面回传 UpdatePanel控件的意义也就失去了在页面上放置隐藏的iFrame按照前面介绍的方法通过javascript动态去修改Form的target属性提交iFrame可以实现类似于Ajax方式的文件上传功能其实页面同样被刷新了只是刷新的是隐藏的iFrame用户不会有什么感觉
前面说了这么多只是想说说我所遇到的问题的背景现在步入正题！
在MOSS中开发页面和普通的ASP NET页面基本没有什么不同主要就是部署的时候会有一些麻烦那么按照前面介绍的方法将编写好的页面部署到站点上运行时我发现了一个奇怪的问题那就是第一次按钮触发事件的时候服务端可以正确响应并且是通过iFrame提交过来的但是从第二次开始就需要等待十几秒的时间按钮才能再次被触发一开始我以为是iFrame在被提交后没有响应完毕来不及处理第二次请求后来通过设置断点和插入调试脚本进行测试发现iFrame已经完全响应完毕按钮还是不能被点击（这里说的按钮不能被点击是指Button不能响应服务端事件）
究竟发生了什么问题？
在 NET时代我们通常会遇到按钮的事件丢失等问题但这是在 NET的环境下根本不存在这种问题况且按钮在第一次的时候是可以被点击的程序一直处于运行状态没有人修改过代码让我非常奇怪！这个问题我反复调试并采用了很多不同的方法去尝试但是问题依旧如查看页面上其它部分可能导致的脚本干扰 setInterval方法的使用是否会导致程序处于等待状态（事实上这个根本不可能）
去掉所有可能导致此问题的控件和代码等等天啊！我几乎尝尽了所有能够想到的办法但是这块大石头依然纹丝不动我崩溃了！！
过了一个周末在家睡了两天脑海中一直想的就是究竟是什么原因导致了按钮的事件不能被触发我也尝试过在FireFox下利用FireBug跟踪按钮的客户端代码执行情况没有什么结果周一上班的时候突然想到用排除法来验证一下看看究竟是哪部分代码出现了问题因为之前我在本地创建的工程中使用了iFrame提交表单并且利用javascript在页面往返服务器的过程中动态修改了Form的target属性并没有发现按钮事件不能被触发的问题说明问题不是出在我所写的代码中我在MOSS站点中创建了一个功能一样的页面上面只有非常简单的几行代码然后编译部署激活特定的Feature访问页面简单看了一下功能很正常说明这种方法在MOSS下是可以正常使用的并没有之前假象的会受到MOSS本身机制的影响
生产环境中的页面要稍微复杂一些里面除了一些必须的功能和UserControl外整个页面是继承自一个公共的模板页难道问题出在模板页上？我又仔细看了看模板页中的代码几乎尝试着将模板页中所有的控件都删除了但是问题依然没有解决一身冷汗啊一上午的时间就这么让我浪费了做过MOSS项目的朋友可能会比较清楚在MOSS上开发项目复杂的并不是如何去写代码而是部署和调试经常大把的时间都浪费在这个上面更何况我为了测试这个问题产生的原因还要新建页面重新部署站点然后调试代码光这个过程就比较繁琐了
反正已经开始做了午饭过后我打算彻底搞定它问题既然不是出在页面本身那一定是出在模板页上因为之前没加模板页的时候是可以的后来将页面继承自模板页后问题就来了在FireFox中查看页面的源代码仔细查看生成的HTML和脚本发现在Body和Form标签上有两个脚本事件不知道是干什么用的很好奇问了一下老大他说这是MOSS在新建模板页时自动加上的没有谁刻意去加它代码片段如下
<body onload= javascript:_spBodyOnLoadWrapper();><form id= Form runat= server onsubmit= return _spFormOnSubmitWrapper(); method= post enctype= multipart/form data>我尝试着将这两个事件取消掉然后重新部署运行程序哈哈！终于可以了那个按钮的事件再也没有丢失过可以一直被点击而不会出现不响应的情况其实罪魁祸首的就是form的onsubmit事件中的_spFormOnSubmitWrapper方法取消它就可以解决问题
但是问题马上又来了既然这个事件是MOSS自动加上的那肯定有它的用途我们不能随意就将它删掉说不定以后哪里就会出问题（虽然我到后来也不太清楚这个函数究竟是用来干什么的）那么只能曲线救国了用FireBug看看它的具体代码吧顺便跟了一下
var _spSuppressFormOnSubmitWrapper=false;function _spFormOnSubmitWrapper(){if(_spSuppressFormOnSubmitWrapper){return true;}if(_spFormOnSubmitCalled){return false;}if(typeof(_spFormOnSubmit)== function){var retval=_spFormOnSubmit();var testval=false;if(typeof(retval)==typeof(testval)&& retval==testval){return false;}}RestoreToOriginalFormAction();_spFormOnSubmitCalled=true;return true;}这个方法只要返回true就会触发服务器端时间如果返回false则不会触发我反复看了一下导致函数返回false的原因是因为_spFormOnSubmitCalled的值为true那么我们只需要将这个变量的值设为false即可重新触发服务器端事件了这个好办我马上修改代码在button按钮的客户端事件代码中这样写
//aspnetForm为Form的客户端name iframeHidden为隐藏的iFrame的namedocument forms[ aspnetForm ] target= iframeHidden;_spFormOnSubmitCalled= false;return true;然后服务端返回的时候再将form的target改回_self这样就可以了！
我不知道MOSS自动加上的那个Form事件是用来干什么的但至少我让_spFormOnSubmitCalled变量的值为false可以导致按钮的事件被触发并且可以实现我预期的效果
因为我在页面提交成功后会整个刷新页面所以也不用担心修改这个值后会带来什么样的后果最后来看一下服务器端要注册的脚本
private const string scriptOK=@ alert({}); window parent location href+=#; window parent location reload();;private const string scriptFailed=@ alert({}); window parent document forms[ aspnetForm ] target= _self;;分为两种如果成功则重新刷新整个页面如果失败则修改父页面Form的target属性的值为_self你可能会问我为什么要将父页面的location href加上一个#这主要是为了解决在FireFox下通过iFrame提交表单并重新刷新整个页面时出现是否重新提交数据的提示（这个问题在IE下不会出现）浏览器只认URL我们稍微修改一下URL的内容只要地址不变重新刷新页面时就不会出现是否重新提交数据的提示了
到目前为止我将我的代码做了这样的修改不知道会不会遇到什么问题写这篇文章的目的有两个一是记录一下自己解决这个问题的过程二是想告诉各位正在做MOSS开发的朋友如果遇到通过Ajax方式无法触发服务器端事件的问题时不妨认真检查检查客户端生成的HTML和脚本找找原因在哪里
lishixinzhi/Article/program/net/201311/12554
如何获取嵌套 iframe 中的元素
要获取嵌套 iframe中的元素，可通过 JavaScript使用 window.frames["iframename"].document结合选择器（如 jQuery的.find()）定位目标元素。具体步骤如下：
1.确认 iframe的名称或 ID嵌套 iframe需通过 name或 id属性标识。例如：<iframe name="myIframe" id="frame1"></iframe>若未显式设置 name，可通过 id结合 document.getElementById()获取 iframe对象，再访问其 contentDocument。2.访问 iframe的文档对象方法一：通过 window.frames使用 window.frames["iframename"].document获取 iframe的文档对象。例如：const iframeDoc= window.frames["myIframe"].document;方法二：通过 DOM选择若 iframe有 id，可直接通过 document.getElementById()获取：const iframe= document.getElementById("frame1");const iframeDoc= iframe.contentDocument;//标准浏览器//或 iframe.contentWindow.document;//兼容性写法3.使用选择器定位元素jQuery示例通过.find()方法在 iframe文档中搜索元素：const$element=$(window.frames["myIframe"].document).find("#myInput");$element.val("新值");//示例操作：设置输入框值原生 JavaScript示例使用 querySelector直接查找：const element= iframeDoc.querySelector("#myInput");element.value="新值";//原生操作4.处理跨域限制同源策略：若 iframe与父页面同源（协议、域名、端口一致），可直接访问其 DOM。跨域情况：若 iframe跨域，浏览器会阻止访问 contentDocument，需通过以下方式解决：postMessage通信：父页面与 iframe协商通过消息传递数据。
服务器配置：修改 iframe资源的 CORS策略（需服务器权限）。
代理页面：将跨域内容嵌入同源中间页。
5.完整代码示例<!--父页面--><iframe name="myIframe" src="child.html"></iframe><script>//同源情况下获取元素 const iframe= window.frames["myIframe"]; const input=$(iframe.document).find("#myInput"); input.on("click", function(){ console.log("输入框被点击！");});//或使用原生 JS const iframeDoc= document.getElementById("myIframe").contentDocument; const inputElement= iframeDoc.querySelector("#myInput"); inputElement.addEventListener("click",()=>{ console.log("原生事件监听");});</script>6.常见问题排查元素未找到：检查 iframe是否加载完成（可通过 iframe.onload事件确保）。跨域错误：确认是否违反同源策略，必要时改用 postMessage。jQuery未加载：确保页面已引入 jQuery库（若使用$符号）。总结同源 iframe：直接通过 window.frames或 DOM选择访问。跨域 iframe：需借助 postMessage或服务器调整策略。推荐实践：优先使用原生 querySelector或现代框架（如 React/Vue的 ref）管理嵌套内容。
iframe传值的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于iframe传递参数、iframe传值的信息别忘了在本站进行查找哦。