打开 jquery 模态对话框后，iframe 内容丢失答案

【问题标题】：Iframe contents are lost after opening a jquery modal dialog打开 jquery 模态对话框后，iframe 内容丢失
【发布时间】：2016-01-31 07:52:43
【问题描述】：

我有一个 iframe。它在一个模态中。见以下代码：

<iframe id="edit-text-modal-value_ifr" src='javascript:""' frameborder="0" allowtransparency="true" title="Rich Text AreaPress ALT-F10 for toolbar. Press ALT-0 for help" style="width: 100%; height: 100px; display: block;">
   #document
   <!DOCTYPE>
   <html>
        <head xmlns="http://www.w3.org/1999/xhtml">
           <style id="mceDefaultStyles" type="text/css">
               .mceResizeHandle {
                   position: absolute;
                   border: 1px solid black;
                   background: #FFF;
                   width: 5px;
                   height: 5px;
                   z-index: 10000
               }
               .mceResizeHandle:hover {
                   background: #000
               }
               img[data-mce-selected] {
                   outline: 1px solid black
               }
               img.mceClonedResizable,
               table.mceClonedResizable {
                   position: absolute;
                   outline: 1px dashed black;
                   opacity: .5;
                   z-index: 10000
               }
           </style>
           <base href="http://localhost/drupal-7.34/">
           <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
           <link type="text/css" rel="stylesheet" href="http://localhost/drupal-7.34/sites/all/libraries/tinymce/jscripts/tiny_mce/themes/advanced/skins/default/content.css">
           <link type="text/css" rel="stylesheet" href="http://localhost/drupal-7.34/themes/bartik/css/layout.css">
           <link type="text/css" rel="stylesheet" href="http://localhost/drupal-7.34/themes/bartik/css/style.css">
           <link type="text/css" rel="stylesheet" href="http://localhost/drupal-7.34/themes/bartik/css/colors.css">
       </head>

       <body id="tinymce" class="mceContentBody " onload="window.parent.tinyMCE.get('edit-text-modal-value').onLoad.dispatch();" contenteditable="true" spellcheck="false" dir="ltr">
           <p>
               <br data-mce-bogus="1">
           </p>
       </body>  
   </html>
</iframe>

当我使用 jquery modal 插件打开另一个 modal 时，iframe 的内容丢失了。为什么？我将如何预防？

jQuery 代码：

jQuery('#myid_templates_editor_insertf_field_modal').dialog('open');

我的新 iframe 代码：

<iframe id="edit-text-modal-value_ifr" src='javascript:""' frameborder="0" allowtransparency="true" title="Rich Text AreaPress ALT-F10 for toolbar. Press ALT-0 for help" style="width: 100%; height: 100px; display: block;">
    #document
    <html>
        <head></head>
        <body></body>
    </html>
</iframe>

【问题讨论】：

似乎遗漏了很多相关信息，例如 tinymce 的初始化方式、哪些元素以及对话框的初始化方式。 iframe 的内部在这里真的不相关......这是它们的生成方式

标签： javascript jquery html jquery-ui iframe

【解决方案1】：

<script type="text/javascript"> 
    $('.the-modal').bind('shown', function() {
       tinyMCE.execCommand('mceAddControl', false, 'mce-<?=$reply["id"]?>');
    });

    $('.the-modal').bind('hide', function() {
        tinyMCE.execCommand('mceRemoveControl', false, 'mce-<?=$reply["id"]?>');
    });
</script>

这是一个错误，我找到了解决方案 here。

【讨论】：

【解决方案2】：

好吧，当然它会消失。因为模态数据是动态创建的。所以当你调用另一个模式时你可以做什么将 iframe 对象复制到另一个类似对象中

var tmp=document.getelememntbyid('iframeid');

并声明 tmp 变量 gloabaly 并在需要时再次使用它。

【讨论】：