1
// 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());

I get my string like 

<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" alt="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 ....

This should work to change the iframe content, but it doesn't work in firefox!

The html shows from firebug like below.

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

the html have appended, then disappear soon in firefox

why console.log(seciframecon.find('html').html()); after seciframecon.find('html').html(htmloutput); can get string, but the iframe content is still blank in firefox browse?

It works well in Chrome.

Any hint?

Anna
  • 41
  • 6

1 Answers1

1

Finally, I fixed it. The reason is

iframe not compeltly loaded when I trying to modify it.

By binding load to this iframe dom, it works in 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() {
    ...

when I am working on this, I meet another issue jQuery .load() not working in Chrome I fix it by updating data to a web server instead of getting from local, cause jquery load function not work for local (html/text)data.

Hope this helps others.

Anna
  • 41
  • 6