在使用showModalDialog中为解决刷新时弹出新窗口时用到iframe所带来的一个问题

最新推荐文章于 2020-09-07 16:26:44 发布
最新推荐文章于 2020-09-07 16:26:44 发布
阅读量242 收藏
点赞数
分类专栏： JavaScript 文章标签： HTML

问题描述：我们在开发过程中使用showModalDialog来产生一个弹出窗口，而在这个弹出窗口中要做一个刷新，或者是切换到其它的url时会弹出新窗口。为了解决这个问题，网上有个办法是采用iframe，在showModalDialog窗口中使用iframe这样就不会有弹出窗口了，但这样使用又带来了一个小的问题，我们页面中的textArea组件不能使用ctrl+a这快捷键了，不知道是什么原因。代码如下：

不使用iframe:

index1.html//打开showModalDialog

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 
    <script>
  function openPage(){
  var back=window.showModalDialog('./showModalDialog.html','win','dialogWidth=800px;dialogHeight=600px;help:no');      
  }
  </script>
 </HEAD>

 <BODY>
      <input type="button" value="打开showModalDialog页面" id="temp" οnclick="openPage()"/>
 </BODY>
 </BODY>
</HTML>

showModalDialog.html//showModalDialog内容页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>

 <BODY>
 <center>
  <a href="./showModalDialog.html" target="_self">刷新会弹出新窗口<a>
 </center>
 </BODY>
</HTML>

使用iframe:

index.html//打开showModalDialog

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script>
  function openPage(){
  var back=window.showModalDialog('./Noname1.html','win','dialogWidth=800px;dialogHeight=600px;help:no');      
  }
  </script>
 </HEAD>

 <BODY>
      <input type="button" value="打开iframe页面" id="temp" οnclick="openPage()"/>
 </BODY>
 
 </BODY>
</HTML>

Noname1.html//使用iframe

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>

 <BODY>
  iFrame：<br>
  <iframe src='Noname2.html' width='100%' height='100%' name="iFrame1"></iframe>
 
 </BODY>
</HTML>

Noname2.html//textArea控件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>

 <BODY>
   子页面：<br>
  <input type="textarea" value="ctrl+a 功能不可用了" id="temp"/>
  <a href="./Noname3.html" target="_self">下一页<a>
 </BODY>
</HTML>

Noname3.html//下一页

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>

 <BODY>
  下一页
 </BODY>
</HTML>

 

现将源文件作为附件也贴出来，供大家参考！

crabdave
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iframe&showModalDialog父窗口
xiexin80的专栏
01-19 482
var parentObj = window.parent;iframe获得父窗体对象在iframe页面大小事在父窗体中改变的，要得到父窗体对象中的frame对象，才能调节大小。frameObject.height = frameObject.contentWindow.document.body.scrollHeight;window.showModalDialog("originTree.
打开新窗口中父子窗口传值研究(open(),showModalDialog(),iframe)
hxkjnet360的专栏
09-28 1299
打开新窗口中父子窗口传值研究(open(),showModalDialog(),iframe) 打开一个新窗口，该子窗口调用父对象的方法或变量，这个问题一直没有搞清楚。网上找了些资料，总结一下： 打开新窗口一般有几种方法，window.open(...),window.showModalDialog(...)，以及iframe中嵌套页面这里也一起研究吧，另外还有window.navig
Ie window.showModalDialog()弹出框
Java地摊
07-22 567
前些天做项目时遇到了个浏览器兼容问题,解决后记录一下,也将模式化的资料放上! 详细问题描述: 在火狐浏览器中弹出一个子窗口,子页面中是一个分页,点下一页后子页面会刷新,然后window.dialogArguments对象就丢失了,alert输出显示undefined [解决方法见第三项] 最近做网站的时候需要用到模式化窗口功能,也遇到了一些问题,所以查了查资料以解决        1....
showModalDialog模态页面中使用Iframe下载文件问题总结
TANHAIWEI的专栏
04-02 267
最近在项目中经常用到模态窗口(showModalDialog)，客户需要在一个模态窗口中有"生成Excel报表"并"导出"的功能。   功能的设计思路是这样的： 1、首先在主窗口收集一些需要的数据 2、showModalDialog，将收集的数据传递过去，在模态页面使用window.dialogArguments接收这些参数 3、在模态页面收集客户的个性化定制信息 4、客户点击模态页面...
用showModalDialog弹出页面后，提交表单总是弹出一个新窗口
09-05
然而，当在使用`showModalDialog`弹出的页面中包含一个表单并尝试进行提交时，有时会遇到一个常见的问题：表单提交操作反而会打开一个新的浏览器窗口，这显然不是我们期望的行为。 为了解决这个问题，我们可以采用...
js showModalDialog弹出窗口实例详解
10-26
JavaScript 的 `showModalDialog` 方法是用来创建一个模态对话框的，这种对话框在打开时会阻止用户与页面的其他部分交互，直到该对话框被关闭。这种方法在网页开发中常用于表单填写、弹出确认窗口或者进行特定任务如...
showModalDialog 弹出窗口关闭不刷新父窗口最终实现了
10-08
网上找了好几个小时没有找到解决办法。最终还是自己解决了。...这样做就是用超链接把返回url转递到用showModalDialog打开的新窗口中，当showModalDialog返回时指到转来的url，最终不刷新父窗口。......
showModalDialog窗口的刷新问题
创业前站
08-02 759
1 showModalDialog窗口内刷新,用iframe解决2 每次打开showModalDialog的内容不刷新,解决使用 showModalDialog(1.asp?idd=+Math.random()......也就是加一个随机的ID,这样每次打开都会刷新 
父窗口的treeview在调用其他窗体的ShowDialog后闪烁问题
weixin_34119545的博客
10-29 212
ShowDialog(this)改为ShowDialog()即可！ 具体原理未深究
弹出窗口__iframe
04-15
①ie7、ie8、firefox及chrome中设置固定后方页面内容（禁止后方的滚动条滚动） ②ie9及以上浏览器中只固定iframe页面，后方页面内容将随着滚动条滚动【原因使用禁止代码时出错】
iframe弹出窗
09-23
很不错iframe弹出窗口，通过div+diag实现
Window.ShowModalDialog使用详解 模态对话框
zzc1684的博客
04-29 279
Javascript有许多内建的方法来产生对话框，如：window.alert(), window.confirm(),window.prompt().等。 然而IE提供更多的方法支持对话框。如：     showModalDialog() (IE 4+ 支持) 　  showModelessDialog() (IE 5+ 支持)     window.showModalDialog()方法用来...
使用window.showModalDialog做弹框
qq_44809022的博客
03-05 230
使用window.showModalDialog做弹框 使用一个例子来描述showModalDialog的作用 例：打开弹框的页面：var settleNoData = window.showModalDialog(’/reins/processSettle.do?actionType=getSettleNoData&id=’+params,’’,‘dialogHeight:450px; ...
showModalDialog()的提交弹出新网页的解决方法
hailxie的专栏
04-21 4917
showModalDialog()是不能够提交给自己的，得交给自己的话就会有新页面产生，所以你要指写form里的target等于一个值。 showModalDialog()里： 在主页面里加一个隐藏的iframe浮动框架： 这样提交就不会有新的页面产生了。     JavaScript支持几种内建的对话框：window.alert()、window.confirm()以及window.prom
iframe中链接新窗口打开
ResumeProject的博客
09-07 5618
对于iframe不能在新窗口打开 <iframe id="myiframe" src="http://localhost:8080/Login.aspx" scrolling="no"></iframe> 1.添加 target="_blank" <a href="http://localhost:8080/HTMLPage.htm" target="_blank">This Page Link</a> 2.javascript window.locati
window.open()和window.showModalDialog 的使用及传值操作
shadow_zed的博客
01-30 4823
本人在使用时主要实现如下个功能， 　　以对话框形式弹出画面，且要求对话框置顶，不可操作其他画面，并且关闭画面时刷新父页面。 window.open 可实现以对话框形式弹出画面，并且关闭画面时刷新父页面。但“对话框置顶，不可操作其他画面”本人并未找到方法。 //刷新父页面 Response.Write("&lt;script&gt;window.opener.location.href=win...
如何使用window.open方法代替showModalDialog？
最新发布
02-02
在使用`window.open`方法代替`showModalDialog`时，可以按照以下步骤进行操作： 1. 使用`window.open`方法打开一个新的浏览器窗口。 2. 在新窗口中加载需要显示的内容，可以是一个HTML页面或者其他类型的内容。 3. 在新窗口中添加关闭按钮或其他交互元素，以便用户可以关闭窗口。 4. 在原始页面中使用JavaScript代码与新窗口进行通信，传递数据或执行其他操作。 下面是一个示例代码，演示如何使用`window.open`方法代替`showModalDialog`： ```javascript // 原始页面中的代码 function openModal() { var data = { name: "John", age: 30 }; var url = "modal.html"; var newWindow = window.open(url, "_blank", "width=400,height=300"); newWindow.data = data; } // modal.html 页面中的代码 window.onload = function() { var data = window.opener.data; // 在新窗口中显示数据或执行其他操作 } ``` 在上面的示例中，`openModal`函数在原始页面中被调用，它使用`window.open`方法打开一个新的浏览器窗口，并将数据传递给新窗口。在新窗口的`onload`事件中，可以通过`window.opener`访问原始页面，并获取传递过来的数据。 请注意，使用`window.open`方法打开的新窗口不会阻塞原始页面的执行，因此需要通过其他方式实现模态对话框的效果，例如在新窗口中添加关闭按钮或其他交互元素。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值