jQuery 内容()更改 iframe 的 html 在 Firefox 中消失

Posted

技术标签:

【中文标题】jQuery 内容()更改 iframe 的 html 在 Firefox 中消失【英文标题】:Jquery contents() change html for iframe disappear in firefox 【发布时间】:2015-02-16 22:45:26 【问题描述】:
// Use ckeditor created a iframe dom.
var iframe_node = new CKEDITOR.dom.element('iframe');
var iframe_styles = 
  'font-size':'inhert',
  'z-index':'10030',
  'position':'absolute',
  'left':'250px',
  'top':'50px',
  'width':'505px',
  'height':'441px'
;
iframe_node.setStyles(iframe_styles);

// Append iframe to cke_dialog
jQuery(iframe_node.$).appendTo('.cke_dialog');

var seciframecon = jQuery('.cke_dialog').find("iframe").contents();
iframe_node = jQuery(iframe_node.$)[0];

console.log(seciframecon.find('html').html());
// I get <head></head><body></body>

seciframecon.find('html').html(htmloutput);

console.log(seciframecon.find('html').html());

我得到我的字符串像

<div class="ctools-modal-content> <div class="modal-header">   <span class="modal-title" id="modal-title" style="font-size:20px;">Format</span>   <input value="format_facet" name="selectedfacet" type="hidden">   <a href="#" class="close"><img title="Close window"  src="xxxx" typeof="foaf:Image"> </a> </div> <div class="modal-content" id="modal-content" style="width: 475px; height: 355px;">  <table>    <thead>      <tr><th style="text-align:center;width:70px;">Include</th>        <th style="text-align:center;width:70px;">Exclude</th>        <th>Format</th>      </tr>     </thead>     <tbody>            <tr class="odd">       <td style="text-align:center;width:70px;"><div>balabalabala ....

这应该可以更改 iframe 内容, 但它在 Firefox 中不起作用!

来自 firebug 的 html 显示如下。

<iframe style="z-index: 10030; position: absolute; left: 250px; top: 50px; width: 505px; height: 441px;">
 <html>
   <head>
   </head>
   <body>
   </body>
 </html>

html 已附加,然后在 firefox 中很快消失

为什么console.log(seciframecon.find('html').html());seciframecon.find('html').html(htmloutput);之后可以得到字符串, 但 iframe 内容在 firefox 浏览中还是空白?

它在 Chrome 中运行良好。

有什么提示吗?

【问题讨论】:

【参考方案1】:

最后,我修复了它。 原因是

我尝试修改 iframe 时未强制加载它。

通过将 load 绑定到这个 iframe dom,它可以在 firefox 中运行。

jQuery(iframe_node.$).load('/topic-page/ajax/ckedialogpopup/' + selecttermfacet + '/' + filter, function()
  CKEDITOR.scriptLoader.load(
  [
    "/sites/all/themes/pharosui_omega/ckeditor/jsrender.min.js"
  ],
  function() 
    ...

当我处理这个问题时,我遇到了另一个问题 jQuery .load() 在 Chrome 中不起作用 我通过将数据更新到 Web 服务器而不是从本地获取来修复它, 导致 jquery 加载功能不适用于本地(html/text)数据。

希望这对其他人有所帮助。

【讨论】:

以上是关于jQuery 内容()更改 iframe 的 html 在 Firefox 中消失的主要内容,如果未能解决你的问题,请参考以下文章

jQuery 内容()更改 iframe 的 html 在 Firefox 中消失

根据内部更改的内容动态调整 jQuery Fancybox 的 iframe 高度

使用 jQuery 更改 iFrame 的 HTML?

如何使用 jquery 从 IFrame 本身更改 IFrame 样式?

使用 jQuery 更改和加载 iframe ‘src’ 属性

iFrame src 更改事件检测?