手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解


Posted in Javascript onJune 18, 2019

本文实例讲述了CKEDITOR 4 实现Dialog 内嵌 IFrame操作。分享给大家供大家参考,具体如下:

在上一篇博文《CKEDITOR 4 扩展插件制作》中,姜哥跟大家探讨了在ckeditor中添加dialog,已经添加dialog的一些控件,最终将控件中的值插入到ckeditor编辑器中的过程。但是实际上,我们更多的应用,还是会在dialog中,添加iframe组件,直接引用外部网页,以实现更为复杂的功能。今天姜哥就和大家一起分享一下,这个开发过程。

继续我们上一个工程中的例子,我们是在contents中添加了elements,就像下面这样:

contents:           //每一个contents在对话框中都是一个tab页
      [
        {
          id: 'user',      //contents的id
          label: 'You name',
          title: 'You name',
          elements:       //定义contents中的内容,我们这里放一个文本框,id是name
          [
            {
              id: 'name',
              type: 'text',
              style: 'width: 50%;',
              label: 'You name',
            }
          ]
        }
      ],

如果我们把elements中间的内容,换成iframe,会是什么样呢?让我们来看一看:

contents:           //每一个contents在对话框中都是一个tab页
      [
        {
          id: 'user',      //contents的id
          label: 'You name',
          title: 'You name',
          elements:
          [
            {
              type: "html",
              html: "<iframe id='myiframe' width='100%' height='100%' src='" + "http://www.163.com" + "'></iframe>",
              style: "width:800px;height:580px;padding:0;"
            }
          ]
        }
      ],

在这里,我们描述了我们的elements的类型是html,接着我们插入了一段html代码,也就是我们的iframe,将网易链接了进来,最后用style标签定义了对话框的大小。保存之后,打开看看效果:

手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解

果然,我大“黄易”的首页被载入进来了,看来这个路子可行!那接下来,我们可以试着载入自己的页面了。在ckeditor_sample.html文件旁边,再新建一个文件,叫做myiframe.html,类似这样:

手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解

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

<html>
  <head></head>
  <body>
    <div>
      姓名: <input type="text" id="username" name="username" value="" /> <br/>
      <input type="checkbox" name="yourbook" value="C++">《C++ 从入门到放弃》</input>
      <input type="checkbox" name="yourbook" value="headfirst">《HeadFirst 设计模式》</input>
      <br />
      <input type="checkbox" name="yourbook" value="Java">《Thinking in Java》</input>
      <input type="checkbox" name="yourbook" value="django">《姜哥的Django匠人生活》</input>
    </div>
  </body>
</html>

然后把myplug.js中elements段的内容改成下面这样,将iframe的src指向我们自己的创建的页面:

contents:           //每一个contents在对话框中都是一个tab页
      [
        {
          id: 'user',      //contents的id
          label: 'You name',
          title: 'You name',
          elements:
          [
            {
              type: "html",
              html: "<iframe id='myiframe' width='100%' height='100%' src='" + "./myiframe.html" + "'></iframe>",
              style: "width:800px;height:580px;padding:0;"
            }
          ]
        }
      ],

保存后打开看效果:

手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解

太棒了!页面出来了,那么,我们怎么获取获取页面上的输入值和复选框的值呢?
还记得上一节,我们打的那些代码中,那些onLoad,onShow之类的函数吗?其实看名字,都可以知道,这些函数被触发的时刻,当我们点击“确定”按钮的时候,会触发onOk事件,同时自动调用onOk()函数,那我们就在onOk()里写点儿代码吧。

onOk: function () {
        var html = "";
        var your_name = document.getElementById('myiframe').contentDocument.getElementById('username');
        //使用JS最基础的getElementById找到我们的iframe控件,然后再获取id为username的控件
        html = html + "<h2>" + your_name.value + ": </h2>";
        var selected_books = document.getElementById('myiframe').contentDocument.getElementsByName('yourbook');
        //使用JS最基础的getElementById找到我们的iframe控件,然后再获取所有name为yourBook的控件
        var books = "";
        for(var i=0; i< selected_books.length; i++){
          //遍历我们的selected数组
          if (selected_books[i].checked){
            books = books + "<p> " + selected_books[i].value + "</p>";
          }
        }
        html = html + books;
        editor.insertHtml(html);
        this.commitContent();
      },

我们用了最基础的js语法,从dom对象中获取我们想要的控件和控件中的值,学过js语法的同学应该一眼就看的出来,这个真的很简单,让我们来运行一下看看吧:

手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解

Oooooops!太糟糕了,居然又报错了,F12打开的调试窗口中,可以看到我们这个的这个错误叫做:

Blocked a frame with origin "null" from accessing a cross-origin frame

错误的意思是:未捕获的安全错误:阻止了一个域为null的frame页面访问另一个域为null的页面。

姜哥给他翻译成人话:其实是浏览器为了避免一种叫做“跨域攻击”的黑客攻击手段,阻止了两个不同域名之间的dom操作。由于我们的页面是本地打开的,浏览器中的地址栏是类似下面这种的本地地址,因此无法访问iframe页面中的值:file:///E:/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/ckeditor_4.8.0_full/ckeditor_sample.html

怎么办呢?其实一般小伙儿伴开发这个页面,都是运行在一个工程里,或者一个项目里,本来就是运行在类似http://localhost/xxx这种网络地址下的,不会有问题,但是我们现在是想调试下啊,怎么办呢。。。

如果只是想调试学习一下,其实特别简单,那就是——换一个浏览器!比如IE浏览器,就妥妥啦!

手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解

注意:这里不是说这段代码在Chrome下无法运行,只是浏览器特性不同,chrome不允许这种不在同一个域名下的内嵌页面通过dom接口来访问,安全性比较高。换句话说就是,如果我们这段代码是发布在一个网站上,比如你放在nginx里,浏览器通过http://localhost/ckeditor/ckeditor_sample.html这种方式去打开我们的页面,就没有问题了!

手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解

相当成功,对吧?让我再次点击我们的插件,发现了什么?对了!What the fuck!上次填入的内容居然还在里面!

手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解

肿么办?还记得我们可以使用的函数吗?对!我们可以用onHide()函数,在对话框关闭时,刷新一下myiframe.html,以保证下一次打开时,是一个全新的页面:

onHide: function () {
        document.getElementById('myiframe').contentDocument.location.reload();
      },

再次保存之后,尝试一下,完全正常了。

今天我们学习了ckeditor自定义插件的高级用法,涉及到了从内嵌iframe取值的相关操作,也解释了几个常见的问题,希望对大家有所帮助。关于ckeditor的用法,暂时先探讨到这里,下次有新的内容时,会再次续更。

完整实例代码点击此处本站下载

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
jquery绑定原理 简单解析与实现代码分享
Sep 06 Javascript
实现局部遮罩与关闭原理及代码
Feb 04 Javascript
javascript中直接引用Microsoft的COM生成Word
Jan 20 Javascript
推荐一个封装好的getElementsByClassName方法
Dec 02 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
Dec 01 Javascript
AngularJs表单验证实例代码解析
Nov 29 Javascript
javascript事件的传播基础实例讲解(35)
Feb 14 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 Javascript
angularjs实现过滤并替换关键字小功能
Sep 19 Javascript
vue+egg+jwt实现登录验证的示例代码
May 18 Javascript
JavaScript+HTML实现学生信息管理系统
Apr 20 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
Jun 18 #Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
Jun 18 #Javascript
使用js在layui中实现上传图片压缩
Jun 18 #Javascript
jquery中为什么能用$操作
Jun 18 #jQuery
详解Vue3.0 前的 TypeScript 最佳入门实践
Jun 18 #Javascript
利用js-cookie实现前端设置缓存数据定时失效
Jun 18 #Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 #Javascript
You might like
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
2009/06/04 Javascript
js setattribute批量设置css样式
2009/11/26 Javascript
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
解析javascript 浏览器关闭事件
2013/07/08 Javascript
node.js中的events.emitter.removeListener方法使用说明
2014/12/10 Javascript
angular简介和其特点介绍
2015/01/29 Javascript
javascript操作表格排序实例分析
2015/05/06 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
2015/09/24 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
2018/01/16 Javascript
vue实现简单loading进度条
2018/06/06 Javascript
JS中appendChild追加子节点无效的解决方法
2018/10/14 Javascript
js类的继承定义与用法分析
2019/06/21 Javascript
原生JavaScript实现轮播图
2021/01/10 Javascript
[01:10]DOTA2次级职业联赛 - EP战队宣传片
2014/12/01 DOTA
python爬虫框架talonspider简单介绍
2017/06/09 Python
Python实现的双色球生成功能示例
2017/12/18 Python
根据DataFrame某一列的值来选择具体的某一行方法
2018/07/03 Python
python将txt文件读取为字典的示例
2018/12/22 Python
详解Python用户登录接口的方法
2019/04/17 Python
Django 实现图片上传和显示过程详解
2019/07/18 Python
Python 内置函数globals()和locals()对比详解
2019/12/23 Python
python filecmp.dircmp实现递归比对两个目录的方法
2020/05/22 Python
Django框架实现在线考试系统的示例代码
2020/11/30 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
天美时手表加拿大官网:Timex加拿大
2016/09/01 全球购物
营销总经理的岗位职责
2013/12/15 职场文书
网页美工求职信范文
2014/04/17 职场文书
个人委托书如何写
2014/09/25 职场文书
小孩不笨观后感
2015/06/03 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书
党性修养心得体会2016
2016/01/21 职场文书
go xorm框架的使用
2021/05/22 Golang