CKEDITOR4怎么實(shí)現(xiàn)Dialog內(nèi)嵌IFrame操作
小編給大家分享一下CKEDITOR 4怎么實(shí)現(xiàn)Dialog內(nèi)嵌IFrame操作，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
成都創(chuàng)新互聯(lián)公司客戶idc服務(wù)中心，提供成都西信服務(wù)器托管、成都服務(wù)器、成都主機(jī)托管、成都雙線服務(wù)器等業(yè)務(wù)的一站式服務(wù)。通過(guò)各地的服務(wù)中心，我們向成都用戶提供優(yōu)質(zhì)廉價(jià)的產(chǎn)品以及開(kāi)放、透明、穩(wěn)定、高性價(jià)比的服務(wù)，資深網(wǎng)絡(luò)工程師在機(jī)房提供7*24小時(shí)標(biāo)準(zhǔn)級(jí)技術(shù)保障。
實(shí)例如下：
contents: //每一個(gè)contents在對(duì)話框中都是一個(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ì)話框中都是一個(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的類型是html,接著我們插入了一段html代碼，也就是我們的iframe，將網(wǎng)易鏈接了進(jìn)來(lái)，最后用style標(biāo)簽定義了對(duì)話框的大小。保存之后，打開(kāi)看看效果：
果然，我大“黃易”的首頁(yè)被載入進(jìn)來(lái)了，看來(lái)這個(gè)路子可行！那接下來(lái)，我們可以試著載入自己的頁(yè)面了。在ckeditor_sample.html文件旁邊，再新建一個(gè)文件，叫做myiframe.html，類似這樣：
打開(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++ 從入門到放棄》</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ì)話框中都是一個(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)看效果：
太棒了！頁(yè)面出來(lái)了，那么，我們?cè)趺传@取獲取頁(yè)面上的輸入值和復(fù)選框的值呢？
還記得上一節(jié)，我們打的那些代碼中，那些onLoad，onShow之類的函數(shù)嗎？其實(shí)看名字，都可以知道，這些函數(shù)被觸發(fā)的時(shí)刻，當(dāng)我們點(diǎn)擊“確定”按鈕的時(shí)候，會(huì)觸發(fā)onOk事件，同時(shí)自動(dòng)調(diào)用onOk()函數(shù)，那我們就在onOk()里寫點(diǎn)兒代碼吧。
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語(yǔ)法，從dom對(duì)象中獲取我們想要的控件和控件中的值，學(xué)過(guò)js語(yǔ)法的同學(xué)應(yīng)該一眼就看的出來(lái)，這個(gè)真的很簡(jiǎn)單，讓我們來(lái)運(yùn)行一下看看吧：
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è)面。
姜哥給他翻譯成人話：其實(shí)是瀏覽器為了避免一種叫做“跨域攻擊”的黑客攻擊手段，阻止了兩個(gè)不同域名之間的dom操作。由于我們的頁(yè)面是本地打開(kā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)行在類似http://localhost/xxx這種網(wǎng)絡(luò)地址下的，不會(huì)有問(wèn)題，但是我們現(xiàn)在是想調(diào)試下啊，怎么辦呢。。。
如果只是想調(diào)試學(xué)習(xí)一下，其實(shí)特別簡(jiǎn)單，那就是——換一個(gè)瀏覽器！比如IE瀏覽器，就妥妥啦！
注意：這里不是說(shuō)這段代碼在Chrome下無(wú)法運(yùn)行，只是瀏覽器特性不同，chrome不允許這種不在同一個(gè)域名下的內(nèi)嵌頁(yè)面通過(guò)dom接口來(lái)訪問(wèn)，安全性比較高。換句話說(shuō)就是，如果我們這段代碼是發(fā)布在一個(gè)網(wǎng)站上，比如你放在nginx里，瀏覽器通過(guò)http://localhost/ckeditor/ckeditor_sample.html這種方式去打開(kāi)我們的頁(yè)面，就沒(méi)有問(wèn)題了！
相當(dāng)成功，對(duì)吧？讓我再次點(diǎn)擊我們的插件，發(fā)現(xiàn)了什么？對(duì)了！What the fuck！上次填入的內(nèi)容居然還在里面！
腫么辦？還記得我們可以使用的函數(shù)嗎？對(duì)！我們可以用onHide()函數(shù)，在對(duì)話框關(guān)閉時(shí)，刷新一下myiframe.html，以保證下一次打開(kāi)時(shí)，是一個(gè)全新的頁(yè)面:
onHide: function () {
document.getElementById('myiframe').contentDocument.location.reload();
},再次保存之后，嘗試一下，完全正常了。
以上是“CKEDITOR 4怎么實(shí)現(xiàn)Dialog內(nèi)嵌IFrame操作”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
文章名稱：CKEDITOR4怎么實(shí)現(xiàn)Dialog內(nèi)嵌IFrame操作
網(wǎng)頁(yè)地址：http://aaarwkj.com/article38/phdisp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷、全網(wǎng)營(yíng)銷推廣、做網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站排名、App設(shè)計(jì)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
- 文章收錄后再修改會(huì)不會(huì)對(duì)網(wǎng)站造成不利？ 2014-07-09
- 網(wǎng)站文章不收錄的原因分析 2014-11-13
- 影響網(wǎng)站收錄的因素有哪些 2022-08-01
- 網(wǎng)站優(yōu)化同質(zhì)內(nèi)容太多怎么辦？收錄情況不佳怎么解決？ 2013-12-07
- 網(wǎng)站建設(shè)完成后為什么百度不收錄網(wǎng)站 2016-09-19
- 網(wǎng)站建設(shè)怎么做網(wǎng)頁(yè)內(nèi)容更有利于收錄和排名 2016-02-15
- 網(wǎng)站的站點(diǎn)收錄率是什么？ 2014-09-28
- 百度新聞源收錄知識(shí)全知道 2016-11-04
- 提高網(wǎng)站收錄的方法有哪些？ 2021-11-26
- 網(wǎng)站收錄下降的原因是什么 2014-04-03
- 哪些原因會(huì)影響網(wǎng)站收錄的減少呢？ 2016-11-09
- 淺談百度搜索引擎收錄與排名 2013-11-09