javascript - ajax后的图像execCommand

Question

我正在使用所见即所得编辑器，并且在使用 execCommand 处理图像时遇到问题，以下是我的页面结构的简化示例:

<div id="buttons_panel"><input id="img_submit" type="button"/></div>

<div id="img_handle" style="display:none;">
<div id="ajax_upload"></div> /* AJAX IMG UPLOAD FROM */
<div id="images"></div> /* DIV FOR ALL UPLOADED IMAGES DISPLAY */
</div>

<iframe id="text_content"></iframe>

我正在使用的简化 JavaScript，基本上显示隐藏的 div 使用 ajax 上传图像并显示所有上传的图像:

<script>
$("#img_submit").click(function(){
$("#img_handle").show();

/* HANDLE IMG UPLOAD WITH AJAX AND RELOAD ALL IMAGES INTO #images DIV */
});
</script>

现在，所有这些都工作得很好 - 一旦使用 ajax 上传新图像，我就会将其附加到图像 div 中:

function loadImgs(){
var loadImages="PATH/TO/URL"; 
$.post(loadImages, {request:"loadImages"}, function(response){
$("#images").append(response);
insert_img();
});
}

然后，单击任一结果时，我运行以下函数:

function insert_img(){$(".img_insert").click(function(){
var frame = document.getElementById('text_content'); frame.document.execCommand('InsertImage',false,"../PATH/TO/IMG"); 
});}

现在，这是 execCommand 拒绝在我得到的 Firebug 中工作的地方:"getElementById("text_content").document UNDEFIEND"

我在该页面上运行的所有其他 execCommand 函数(例如:斜体粗体、字体颜色等)都可以工作，但这里不行，有人可以帮我找出解决方案吗？

Answer 1

获取 document 的标准方法<iframe> 内的对象元素是通过其 contentDocument属性(property)而不是 document 。某些较旧的浏览器不支持此功能，但您可以使用 contentWindow.document相反。

因此，以下内容将在所有浏览器中运行，除了那些不支持 contentDocument 的浏览器。或contentWindow ，实际上现在已经不存在了:

function getIframeDocument(iframeEl) {
    return iframeEl.contentDocument || iframeEl.contentWindow.document;
}

function insert_img(){
    $(".img_insert").click(function() {
        var frame = document.getElementById('text_content');
        getIframeDocument(frame).execCommand('InsertImage',false,"../PATH/TO/IMG");
    });
}