`
crabdave
  • 浏览: 1295368 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

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" 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>

 

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

分享到：
| 格式化时间的函数
评论
1 楼 aricluo 2012-02-01  
谢谢分享，很有借鉴哦
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    showModalDialog 弹出窗口关闭不刷新父窗口最终实现了

    通过以上步骤，我们可以实现使用`showModalDialog`弹出窗口并在关闭时不刷新父窗口的需求。这种方法不仅能够提高用户体验，还能更好地管理页面的状态。需要注意的是，随着浏览器对`showModalDialog`的支持逐渐减少，...

    showModalDialog刷新窗口的例子

    在IT行业中，尤其是在Web开发领域，`showModalDialog`是一个重要的JavaScript函数，它用于打开一个模态对话框，即在用户与新窗口交互时，主窗口会被暂时禁用。这个功能在需要用户输入额外信息或者确认操作时非常有用...

    showModalDialog open弹出子窗口操作parent、opener父窗口及跨域处理

    1&gt; window.showModalDialog()采用JS原理实现，同时父窗口不可操作，window.open()采用新创建一个窗口，同时父窗口可操作； 2&gt; 父窗口与子窗口传递值的方式也有所不同，在子窗口中操作父窗口也语法也不同，分别为var...

    针对window.showmodaldialog弹出窗体无刷新的详细使用

    在网页开发中，`window.showModalDialog` 是一个古老的 API，用于创建模态对话框，它可以在不刷新页面的情况下与用户交互。这个方法在现代Web开发中已经逐渐被`&lt;dialog&gt;`元素或JavaScript库如jQuery UI、Bootstrap ...

    解决showModalDialog 跨域 iframe

    在IT行业中，尤其是在Web开发领域，跨域问题是一个常见的挑战，特别是在使用特定的浏览器API时，比如`showModalDialog`。这个API允许开发者在当前页面上弹出一个模态对话框，显示另一个网页内容。然而，由于同源策略...

    分页后弹出模态窗口刷新父窗口

    根据给定文件的信息，本文将围绕“分页后弹出模态窗口刷新父窗口”的主题进行深入探讨。此话题主要涉及前端开发中的交互设计、页面更新机制以及如何在不同的页面间进行数据同步等内容。 ### 一、理解分页与模态窗口...

    showModalDialog跨域解决例子

    "showModalDialog"是HTML5中的一个古老对话窗口方法，用于在当前页面上打开一个新的浏览器窗口，并与父窗口保持交互。然而，当尝试使用`showModalDialog`在不同源之间打开页面时，同样会遭遇跨域限制。标题...

    showModalDialog使用例子,父窗口向子窗口传递值,子窗口设置父窗口的值,子窗口关闭的时候返回值到父窗口

    在JavaScript中，`showModalDialog`是一个非常有用的函数，它允许我们打开一个新的浏览器窗口或对话框，并与父窗口进行交互。这个功能在开发过程中经常用于创建弹出式表单、确认对话框或者需要用户输入信息的场景。...

    js弹出一个新页面并获得弹出页面的值

    根据提供的文件信息，本文将详细解释如何使用JavaScript在父页面中弹出一个新的窗口，并从这个新弹出的窗口中获取数据。此技术常用于需要在当前页面与另一个页面之间进行数据交互的应用场景。 ### 一、理解弹窗原理...

    解决window.showModalDialog跨域返回值

    然而，当涉及到跨域时，`showModalDialog`面临一个问题：它无法正确地返回值。这是因为浏览器的安全策略阻止了跨域通信，特别是涉及返回值的情况。为了解决这个问题，我们可以利用`iframe`嵌套页面的技术来实现跨域...

    sharepoint 2010 弹出模式窗口showModalDialog并返回值returnResult方法.

    在SharePoint 2010开发中，`_spPageContextInfo`对象提供了一种方便的方式来弹出模态对话框，即`showModalDialog`函数。这个功能在处理用户交互、表单填写、确认操作或者展示详细信息时非常实用。本篇文章将详细探讨...

    showModalDialog和showModelessDialog使用心得

    虽然`showModalDialog` 和 `showModelessDialog` 提供了在Web应用中创建弹出窗口的能力，但随着Web标准的发展，`showModelessDialog`已被废弃，而`showModalDialog`也逐渐被更现代化的技术所替代。掌握这些方法的...

    关于struts2里用javascript刷新window.showModalDialog的父页面

    其中一个常见的场景就是通过`window.showModalDialog`方法打开一个新窗口，并在完成某些操作后刷新父页面。本文将详细介绍如何在Struts2项目中实现这一功能。 #### Struts2简介 Struts2是基于MVC设计模式的一个...

    javascript弹出窗口问题总结

    本篇文章将针对JavaScript弹出窗口的相关问题进行总结，包括无提示刷新网页、刷新页面的方法、弹出窗口代码、模式窗口的数据刷新问题、模式窗口中链接弹出新窗口以及无提示关闭页面的方法。 1. **无提示刷新网页** ...

    JS控制弹出页面窗口控件（openWin）

    window.open()和window.showModalDialog()，并解决了showModalDialog()弹出窗口中列表分页的问题。 提供了三个JS方法： （1）showWindow(sURL, width, height); （2）showWindowInPage(pageUrl, params, title, ...

    JS 弹出对话框window.showModalDialog（）

    在JavaScript中，`window.showModalDialog()` 是一个非标准但广泛使用的API，用于创建模态对话框。模态对话框是一种阻止用户与主窗口交互直至关闭对话框的弹出窗口。这种方法特别适用于需要用户输入或确认某些信息的...

    用showModalDialog弹出页面后，提交表单总是弹出一个新窗口

    然而，当在使用`showModalDialog`弹出的页面中包含一个表单并尝试进行提交时，有时会遇到一个常见的问题：表单提交操作反而会打开一个新的浏览器窗口，这显然不是我们期望的行为。 为了解决这个问题，我们可以采用...

    jsp页面同时弹出页面和对话框

    在IT领域，特别是Web开发中，使用JSP（JavaServer Pages）进行动态网页设计时，开发者经常需要实现在用户交互过程中弹出特定的页面或对话框来获取输入、展示信息或进行确认操作。本文将详细解析如何在JSP页面中通过...

Magicbox
Global site tag (gtag.js) - Google Analytics