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

问题描述:我们在开发过程中使用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" onclick="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','dialogWidth=800px;dialogHeight=600px;help:no');      
  }
  </script>
 </HEAD>

 <BODY>
      <input type="button" value="打开iframe页面" id="temp" onclick="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>

 

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)