教你CKEDITOR 4实现Dialog嵌入式IFrame操作的细�

本文用一个例子来说明CKEDITOR 4在对话框中实现IFrame操作。分享给大家参考，如下：

在上一篇博文《CKEDITOR 4 扩展插件制作》中，江歌讨论了将对话框添加到ckeditor中，添加对话框的一些控件，最后将控件中的值插入ckeditor编辑器的过程。但实际上，我们更多的应用会在对话框中加入iframe组件，直接引用外部网页来实现更复杂的功能。今天，江哥就跟大家分享一下这个发展过程。

继续上一个项目中的示例，我们向内容中添加了元素，如下所示：

Contents: //每个内容都是对话框中的一个标签页[{ID :' user '，//ID标签:' you name '的内容，标题：' you name '，elements 3360//定义了内容中的内容，我们在这里放了一个文本框，其ID为name [{id:' name '，type:' text '，style : ' width 3360 50%；'，标签: 'You name '，}]}])，如果我们用iframe替换元素中间的内容会是什么样子？让我们来看看：

Contents: //每个内容都是对话框中的选项卡页[{ID :' user '，//ID标签:' you name '的内容，标题：' you name '，元素： [ { type: 'html '，html : ' iframe ID=' myiframe ' width=' 100% ' height=' 100% ' src=' ' ' 3358 www . 163.com ' '/iframe '，style高度：580 px；padding:0'}]}]，在这里，我们描述我们的元素的类型是html，然后我们插入一个html代码，也就是我们的iframe，链接网易进去，最后用style标签定义对话框的大小。保存后，打开查看效果：

果然，我的大“黄易”的主页被加载了进去。看来这种方式是可行的！然后，我们可以尝试加载我们自己的页面。在ckeditor_sample.html文件旁边，创建一个名为myiframe.html的新文件，如下所示：

打开这个文件进行编辑，填写下面的代码，我们构建一个带有输入框和复选框的页面：

Html标题/标题正文div名称：输入类型=' text ' id=' username ' name=' username ' value=' '/br/Input type=' checkbox ' name=' your book ' value=' c ' 《C++ 从入门到放弃》/Input Input type=' checkbox ' name=' your book ' value=' Java ' 《HeadFirst 设计模式》/Input Input type=' checkbox ' name=' your book ' value='

Contents: //每个内容都是对话框中的选项卡页[{ID :' user '，//ID标签:' you name '的内容，title :' you name '，element 3360[{ type : ' html '，html : ' iframe ID=' myiframe ' width=' 100% ' height=' 100% ' src=' ']。/myiframe . html ' '/iframe '，style: ' width:800px高度：580 px；padding:0'}]}]，保存后打开看看效果：

干得好！当页面出来后，我们如何获取页面上的输入值和复选框值？还记得我们在前一节输入的代码中的onLoad和onShow这样的函数吗？其实我们从名字就可以知道，当这些函数被触发的时候，当我们点击“OK”按钮的时候，就会触发onOk事件，并且会自动调用onOk()函数，所以我们用onOk()写一些代码吧。

onOk:函数(){ var html=var your _ name=document . getelementbyid(' myiframe '). content document . getelementbyid(' username ')；//用JS最基本的getElementById找到我们的iframe控件，然后得到id username html=html ' H2 ' your _ name . value ' :/H2 '的控件；var selected _ books=document . getelementbyid(' myiframe '). content document . getelementsbyname(' your book ')；//用JS最基本的getElementById找到我们的iframe控件，然后得到所有名为yourBook=for(var I=0；我选择了_ books.lengthI ){ //遍历我们选中的数组if (selected _ books [I]。选中){ books=books ' p ' selected _ books[I]。值'/p '；} } html=html书籍；editor . insert HTMl(HTMl)；this.commitcontent()；}，我们使用最基本的js语法从dom对象中获取我们想要的控件和控件中的值。学过js语法的同学应该一目了然。这真的很简单。让我们运行它，看看：

呜呜！太糟糕了，我又报错了。在F12打开的调试窗口中，可以看到我们的错误叫做：

阻止原点为“空”的帧访问跨原点帧

错误意味着：未捕获的安全错误：具有空域的框架页被阻止访问另一个具有空域的页。

江歌为他翻译成普通话：其实是为了避免一种叫做“跨域攻击”的黑客攻击，浏览器阻止了两个不同域名之间的dom操作。由于我们的页面是在本地打开的，浏览器中的地址栏是如下所示的本地地址，因此无法访问iframe页面中的值：file :///e ://new folder/ckeditor _ 4 . 8 . 0 _ full/ckeditor _ sample.html。

我该怎么办？事实上，这个页面的一般开发是在一个项目或一个项目中运行的，这个项目最初是在像http://localhost/xxx这样的网络地址下运行的。不会有问题，但是我们现在要调试。我们做什么呢。

如果只是想调试学习，其实很简单，就是把——改成浏览器！比如IE浏览器，太完美了！

注意：这并不是说这段代码不能在chrome下运行，而是浏览器特性不同。Chrome不允许通过dom接口访问这类不在同一个域名下的嵌入式页面，安全性很高。换句话说，如果我们的代码发布在网站上，比如你把它放在nginx里，浏览器通过http://localhost/ckeditor/ckeditor _ sample.html打开我们的页面，就没有问题了！

相当成功，对吧？让我再次点击我们的插件。我发现了什么？没错！搞什么鬼！上次填写的内容还在里面！

肿胀怎么办？还记得我们可以使用的功能吗？没错。我们可以使用onHide()函数在对话框关闭时刷新myiframe.html，从而保证下次打开时是全新的：页。

onHide:函数(){ document . getelementbyid(' myiframe '). content document . location . reload()；}，再次保存后，尝试一下，完全正常。

今天我们学习了ckeditor自定义插件的高级用法，涉及到从嵌入式iframe中获取值的操作，也讲解了一些常见的问题，希望对大家有所帮助。关于ckeditor的用法，我们暂时在这里讨论。下次有新内容时，我们会再次更新。

单击此处下载完整的示例代码。

更多对JavaScript相关内容感兴趣的读者可以查看本网站专题：《Thinking in Java》、《姜哥的Django匠人生活》、《JavaScript错误与调试技巧总结》、《JavaScript操作XML文件技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》

希望本文对JavaScript编程有所帮助。