Question

我有以下代码在div中创建一个iFrame，然后将内容添加到iFrame的主体内部。这在Chrome和Edge中运行良好。但Firefox之后立即删除了附加的内容。

var $iframe = $('<iframe/>', {
  'class' : 'editor-iframe',
  'src' : '',
  'border': 0,
  'height' : '100%',
  'width' : '100%'
});

var $iframe_editor = $('<div/>', { 
  'class': "editor" ,
  'contenteditable' : true
});

var contents = $('#editor').html();
$iframe_editor.append(contents);
$('#editor').html($iframe);
$('#editor').find('iframe').contents().find('body').append($iframe_editor);

.editor{
  border: 2px solid green;
  height: 300px;
  width: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="editor" id="editor">
<h4>Qui ita affectus, beatum esse numquam probabis;</h4>

<p>Quacumque enim ingredimur, in aliqua historia vestigium ponimus. Commoda autem et incommoda in eo genere sunt, quae praeposita et reiecta diximus; Ille enim occurrentia nescio quae comminiscebatur; Sit hoc ultimum bonorum, quod nunc a me defenditur; </p>
</div>

您还可以在此JSFiddle中查看代码 - https://jsfiddle.net/thb2mz3k/6/

我该如何解决这个问题？谢谢

Answer 1

I couldn't find the reason why Firefox doing this. But i've found the solution/fix for this.

$('#editor').find('iframe').load(function(){ $(this).contents().find('body').append($iframe_editor); });

So, by this Firefox waits till the iFrame loads and then appends the HTML inside the iFrame. Though this doesn't work on Chrome or Edge. So, i've used browser detection to apply this, and the previous code for Chrome or Edge.

Hope this helps the other.

Firefox删除iFrame的动态附加的正文内容

1 个答案: