在使用showModalDialog中为解决刷新时弹出新窗口时用到iframe所带来的一个问题
编程技术 / houtizong 发布于 3年前 64
问题描述：我们在开发过程中使用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','win','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>
现将源文件作为附件也贴出来，供大家参考！
请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
技术博客集 - 网站简介：
前后端技术：
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成
网站主要作用：
1.编程技术分享及讨论交流，内置聊天系统;
2.测试交流框架问题，比如：Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识，如有侵权请发邮件到站长邮箱，站长会尽快处理;
4.站长邮箱：[email protected];
文章归档
文章标签
友情链接
