本文實例講述了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_sample.html文件旁邊，再新建一個文件，叫做myiframe.html，類似這樣：
打開這個文件進行編輯，填入以下代碼，我們構建一個帶有輸入框和復選框的頁面：
<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;" } ] } ],保存后打開看效果：
太棒了！頁面出來了，那么，我們怎么獲取獲取頁面上的輸入值和復選框的值呢？
還記得上一節，我們打的那些代碼中，那些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語法的同學應該一眼就看的出來，這個真的很簡單，讓我們來運行一下看看吧：
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瀏覽器，就妥妥啦！
注意：這里不是說這段代碼在Chrome下無法運行，只是瀏覽器特性不同，chrome不允許這種不在同一個域名下的內嵌頁面通過dom接口來訪問，安全性比較高。換句話說就是，如果我們這段代碼是發布在一個網站上，比如你放在nginx里，瀏覽器通過http://localhost/ckeditor/ckeditor_sample.html這種方式去打開我們的頁面，就沒有問題了！
相當成功，對吧？讓我再次點擊我們的插件，發現了什么？對了！What the fuck！上次填入的內容居然還在里面！
腫么辦？還記得我們可以使用的函數嗎？對！我們可以用onHide()函數，在對話框關閉時，刷新一下myiframe.html，以保證下一次打開時，是一個全新的頁面:
onHide: function () { document.getElementById('myiframe').contentDocument.location.reload(); },再次保存之后，嘗試一下，完全正常了。
今天我們學習了ckeditor自定義插件的高級用法，涉及到了從內嵌iframe取值的相關操作，也解釋了幾個常見的問題，希望對大家有所幫助。關于ckeditor的用法，暫時先探討到這里，下次有新的內容時，會再次續更。
完整實例代碼點擊此處本站下載。
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript錯誤與調試技巧總結》、《JavaScript操作XML文件技巧總結》、《JavaScript中json操作技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
