Question

我试图获取编辑器生成的div的内容，

问题是这个div包含一个iframe而iframe包含一个新文档

这是我的脚本

$(document).ready(function(){
        $("#save").click(function() 
        {
            var txt = $("#cke_1_contents").contents();
            console.log($("#cke_1_contents").contents());
        });
});

这是我想要的内容

<div id="cke_1_contents" class="cke_contents cke_reset" role="presentation" style="height: 400px;"><span id="cke_89" class="cke_voice_label">Press ALT 0 for help</span><iframe src="" frameborder="0" class="cke_wysiwyg_frame cke_reset" style="width: 100%; height: 100%;" title="Rich Text Editor, content" aria-describedby="cke_89" tabindex="0" allowtransparency="true"></iframe></div>
    <span id="cke_89" class="cke_voice_label">Press ALT 0 for help</span>
    <iframe src="" frameborder="0" class="cke_wysiwyg_frame cke_reset" style="width: 938px; height: 100%;" title="Rich Text Editor, content" aria-describedby="cke_89" tabindex="0" allowtransparency="true"></iframe>
        #document
        <html>....</html>
    </iframe>
<div>

我只获得没有iframe内容的div和iframe

谢谢你们的帮助

Answer 1

首先，iframe的src属性为空。如果要将外部文档加载到iframe中，则必须设置src属性（至少我不知道其他任何合理的方法）。

其次，请注意iframe受same origin policy.影响因此，如果您的iframe正在加载来自其他域的内容，则父文档通常无法访问iframe的内容。但是，有很多方法可以解决这个问题，我建议深入研究覆盖相同原始政策的上述链接，以及深入讨论iframe的this link（包括在使用时如何处理相同的原始政策）内部框架。）

如果您需要从另一个域（我不知道因为您的src属性为空）加载内容，iframe的一个替代方法是使用代理方法获取内容。基本上，您可以从服务器端发出HTTP请求，获取内容，然后在页面提供之前将其添加到您的页面。这可以使用诸如curl in PHP之类的东西毫不费力地完成。

Answer 2

CKEditor有一个非常好的javascript API，您可以使用： http://docs.ckeditor.com/#!/api

找到你需要的东西可能有点棘手。

查看此页面sto在操作中查看它（viewsource找到GetContents方法）： http://rev.ckeditor.com/ckeditor/trunk/7596/_samples/api.html

function GetContents()
{
    // Get the editor instance that you want to interact with.
    var oEditor = CKEDITOR.instances.editor1;

    // Get editor contents
    // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#getData
    alert( oEditor.getData() );
}

Answer 3

如果该新文档来自您的域名以外的其他地方，则您无法拥有该文档。要获得它，您需要使用服务器端编程。但如果它来自您的网站，那么是的。

var x=document.getElementById("myframe");
var y= x.contentDocument;
y.d.body.innerHTML; //here

获取包含iframe JQuery的div的内容

3 个答案: