快捷導(dǎo)航

手把手教你 CKEDITOR 4 實(shí)現(xiàn)Dialog 內(nèi)嵌 IFrame操作詳解

更新時(shí)間：2019年06月18日 11:38:39 作者：iMyWhale

這篇文章主要介紹了手把手教你 CKEDITOR 4 實(shí)現(xiàn)Dialog 內(nèi)嵌 IFrame操作,結(jié)合實(shí)例形式分析了CKEDitor4 Dialog內(nèi)嵌IFrame具體操作步驟與相關(guān)注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了CKEDITOR 4 實(shí)現(xiàn)Dialog 內(nèi)嵌 IFrame操作。分享給大家供大家參考，具體如下：

在上一篇博文《CKEDITOR 4 擴(kuò)展插件制作》中，姜哥跟大家探討了在ckeditor中添加dialog，已經(jīng)添加dialog的一些控件，最終將控件中的值插入到ckeditor編輯器中的過(guò)程。但是實(shí)際上，我們更多的應(yīng)用，還是會(huì)在dialog中，添加iframe組件，直接引用外部網(wǎng)頁(yè)，以實(shí)現(xiàn)更為復(fù)雜的功能。今天姜哥就和大家一起分享一下，這個(gè)開(kāi)發(fā)過(guò)程。

繼續(xù)我們上一個(gè)工程中的例子，我們是在contents中添加了elements，就像下面這樣：

      contents:           //每一個(gè)contents在對(duì)話(huà)框中都是一個(gè)tab頁(yè)
      [
        {
          id: 'user',      //contents的id
          label: 'You name',
          title: 'You name',
          elements:       //定義contents中的內(nèi)容，我們這里放一個(gè)文本框，id是name
          [
            {
              id: 'name',
              type: 'text',
              style: 'width: 50%;',
              label: 'You name',
            }
          ]
        }
      ],

如果我們把elements中間的內(nèi)容，換成iframe，會(huì)是什么樣呢？讓我們來(lái)看一看：

      contents:           //每一個(gè)contents在對(duì)話(huà)框中都是一個(gè)tab頁(yè)
      [
        {
          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的類(lèi)型是html,接著我們插入了一段html代碼，也就是我們的iframe，將網(wǎng)易鏈接了進(jìn)來(lái)，最后用style標(biāo)簽定義了對(duì)話(huà)框的大小。保存之后，打開(kāi)看看效果：

這里寫(xiě)圖片描述

果然，我大“黃易”的首頁(yè)被載入進(jìn)來(lái)了，看來(lái)這個(gè)路子可行！那接下來(lái)，我們可以試著載入自己的頁(yè)面了。在ckeditor_sample.html文件旁邊，再新建一個(gè)文件，叫做myiframe.html，類(lèi)似這樣：

這里寫(xiě)圖片描述

打開(kāi)這個(gè)文件進(jìn)行編輯，填入以下代碼，我們構(gòu)建一個(gè)帶有輸入框和復(fù)選框的頁(yè)面：

<html>
  <head></head>
  <body>
    <div>
      姓名： <input type="text" id="username" name="username" value="" /> <br/>
      <input type="checkbox" name="yourbook" value="C++">《C++ 從入門(mén)到放棄》</input>
      <input type="checkbox" name="yourbook" value="headfirst">《HeadFirst 設(shè)計(jì)模式》</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段的內(nèi)容改成下面這樣，將iframe的src指向我們自己的創(chuàng)建的頁(yè)面：

      contents:           //每一個(gè)contents在對(duì)話(huà)框中都是一個(gè)tab頁(yè)
      [
        {
          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;"
            }
          ]
        }
      ],

保存后打開(kāi)看效果：

這里寫(xiě)圖片描述

太棒了！頁(yè)面出來(lái)了，那么，我們?cè)趺传@取獲取頁(yè)面上的輸入值和復(fù)選框的值呢？
還記得上一節(jié)，我們打的那些代碼中，那些onLoad，onShow之類(lèi)的函數(shù)嗎？其實(shí)看名字，都可以知道，這些函數(shù)被觸發(fā)的時(shí)刻，當(dāng)我們點(diǎn)擊“確定”按鈕的時(shí)候，會(huì)觸發(fā)onOk事件，同時(shí)自動(dòng)調(diào)用onOk()函數(shù)，那我們就在onOk()里寫(xiě)點(diǎn)兒代碼吧。

      onOk: function () {
        var html = "";
        var your_name = document.getElementById('myiframe').contentDocument.getElementById('username');
        //使用JS最基礎(chǔ)的getElementById找到我們的iframe控件，然后再獲取id為username的控件
        html = html + "<h2>" + your_name.value + ": </h2>";
        var selected_books = document.getElementById('myiframe').contentDocument.getElementsByName('yourbook');
        //使用JS最基礎(chǔ)的getElementById找到我們的iframe控件，然后再獲取所有name為yourBook的控件
        var books = "";
        for(var i=0; i< selected_books.length; i++){
          //遍歷我們的selected數(shù)組
          if (selected_books[i].checked){
            books = books + "<p> " + selected_books[i].value + "</p>";
          }
        }
        html = html + books;
        editor.insertHtml(html);
        this.commitContent();
      },

我們用了最基礎(chǔ)的js語(yǔ)法，從dom對(duì)象中獲取我們想要的控件和控件中的值，學(xué)過(guò)js語(yǔ)法的同學(xué)應(yīng)該一眼就看的出來(lái)，這個(gè)真的很簡(jiǎn)單，讓我們來(lái)運(yùn)行一下看看吧：

這里寫(xiě)圖片描述

Oooooops！太糟糕了，居然又報(bào)錯(cuò)了，F(xiàn)12打開(kāi)的調(diào)試窗口中，可以看到我們這個(gè)的這個(gè)錯(cuò)誤叫做：

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

錯(cuò)誤的意思是：未捕獲的安全錯(cuò)誤：阻止了一個(gè)域?yàn)閚ull的frame頁(yè)面訪問(wèn)另一個(gè)域?yàn)閚ull的頁(yè)面。

姜哥給他翻譯成人話(huà)：其實(shí)是瀏覽器為了避免一種叫做“跨域攻擊”的黑客攻擊手段，阻止了兩個(gè)不同域名之間的dom操作。由于我們的頁(yè)面是本地打開(kāi)的，瀏覽器中的地址欄是類(lèi)似下面這種的本地地址，因此無(wú)法訪問(wèn)iframe頁(yè)面中的值：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

怎么辦呢？其實(shí)一般小伙兒伴開(kāi)發(fā)這個(gè)頁(yè)面，都是運(yùn)行在一個(gè)工程里，或者一個(gè)項(xiàng)目里，本來(lái)就是運(yùn)行在類(lèi)似http://localhost/xxx這種網(wǎng)絡(luò)地址下的，不會(huì)有問(wèn)題，但是我們現(xiàn)在是想調(diào)試下啊，怎么辦呢。。。

如果只是想調(diào)試學(xué)習(xí)一下，其實(shí)特別簡(jiǎn)單，那就是——換一個(gè)瀏覽器！比如IE瀏覽器，就妥妥啦！

這里寫(xiě)圖片描述

注意：這里不是說(shuō)這段代碼在Chrome下無(wú)法運(yùn)行，只是瀏覽器特性不同，chrome不允許這種不在同一個(gè)域名下的內(nèi)嵌頁(yè)面通過(guò)dom接口來(lái)訪問(wèn)，安全性比較高。換句話(huà)說(shuō)就是，如果我們這段代碼是發(fā)布在一個(gè)網(wǎng)站上，比如你放在nginx里，瀏覽器通過(guò)http://localhost/ckeditor/ckeditor_sample.html這種方式去打開(kāi)我們的頁(yè)面，就沒(méi)有問(wèn)題了！

這里寫(xiě)圖片描述

相當(dāng)成功，對(duì)吧？讓我再次點(diǎn)擊我們的插件，發(fā)現(xiàn)了什么？對(duì)了！What the fuck！上次填入的內(nèi)容居然還在里面！

這里寫(xiě)圖片描述

腫么辦？還記得我們可以使用的函數(shù)嗎？對(duì)！我們可以用onHide()函數(shù)，在對(duì)話(huà)框關(guān)閉時(shí)，刷新一下myiframe.html，以保證下一次打開(kāi)時(shí)，是一個(gè)全新的頁(yè)面:

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

再次保存之后，嘗試一下，完全正常了。

今天我們學(xué)習(xí)了ckeditor自定義插件的高級(jí)用法，涉及到了從內(nèi)嵌iframe取值的相關(guān)操作，也解釋了幾個(gè)常見(jiàn)的問(wèn)題，希望對(duì)大家有所幫助。關(guān)于ckeditor的用法，暫時(shí)先探討到這里，下次有新的內(nèi)容時(shí)，會(huì)再次續(xù)更。

完整實(shí)例代碼點(diǎn)擊此處本站下載。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript操作XML文件技巧總結(jié)》、《JavaScript中json操作技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: