CKEDITOR4怎么實現(xiàn)Dialog內(nèi)嵌IFrame操作

小編給大家分享一下CKEDITOR 4怎么實現(xiàn)Dialog內(nèi)嵌IFrame操作，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司客戶idc服務(wù)中心，提供成都西信服務(wù)器托管、成都服務(wù)器、成都主機托管、成都雙線服務(wù)器等業(yè)務(wù)的一站式服務(wù)。通過各地的服務(wù)中心，我們向成都用戶提供優(yōu)質(zhì)廉價的產(chǎn)品以及開放、透明、穩(wěn)定、高性價比的服務(wù)，資深網(wǎng)絡(luò)工程師在機房提供7*24小時標(biāo)準(zhǔn)級技術(shù)保障。

實例如下：

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

如果我們把elements中間的內(nèi)容，換成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，將網(wǎng)易鏈接了進(jìn)來，最后用style標(biāo)簽定義了對話框的大小。保存之后，打開看看效果：

CKEDITOR 4怎么實現(xiàn)Dialog內(nèi)嵌IFrame操作

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

CKEDITOR 4怎么實現(xiàn)Dialog內(nèi)嵌IFrame操作

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

<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 設(shè)計模式》</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)建的頁面：

  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怎么實現(xiàn)Dialog內(nèi)嵌IFrame操作

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

  onOk: function () {
        var html = "";
        var your_name = document.getElementById('myiframe').contentDocument.getElementById('username');
        //使用JS最基礎(chǔ)的getElementById找到我們的iframe控件，然后再獲取id為username的控件
        html = html + "<h3>" + your_name.value + ": </h3>";
        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語法，從dom對象中獲取我們想要的控件和控件中的值，學(xué)過js語法的同學(xué)應(yīng)該一眼就看的出來，這個真的很簡單，讓我們來運行一下看看吧：

CKEDITOR 4怎么實現(xiàn)Dialog內(nèi)嵌IFrame操作

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

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

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

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

CKEDITOR 4怎么實現(xiàn)Dialog內(nèi)嵌IFrame操作

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

CKEDITOR 4怎么實現(xiàn)Dialog內(nèi)嵌IFrame操作

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

CKEDITOR 4怎么實現(xiàn)Dialog內(nèi)嵌IFrame操作

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

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

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

以上是“CKEDITOR 4怎么實現(xiàn)Dialog內(nèi)嵌IFrame操作”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章名稱：CKEDITOR4怎么實現(xiàn)Dialog內(nèi)嵌IFrame操作
網(wǎng)頁地址：http://bm7419.com/article38/phdisp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、全網(wǎng)營銷推廣、做網(wǎng)站、品牌網(wǎng)站設(shè)計、網(wǎng)站排名、App設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)