本人開發(fā)word插件應用 js api使用過程中遇到錯誤的經(jīng)驗和教訓,在此記載,如有疑問 多多指教
TaskPaneApp:窗格外接程序
~remoteAppUrl:外接程序的遠程Web應用程序的URL

Contoso.GetStarted.Title指向 下面ShortString定義的value

設立"嚴格模式"的目的,主要有以下幾個:
-消除Javascript語法的一些不合理、不嚴謹之處,減少一些怪異行為;
-消除代碼運行的一些不安全之處,保證代碼運行的安全;
-提高編譯器效率,增加運行速度;
-為未來新版本的Javascript做好鋪墊。
"嚴格模式"體現(xiàn)了Javascript更合理、更安全、更嚴謹?shù)陌l(fā)展方向,包括IE 10在內的主流瀏覽器,都已經(jīng)支持它,許多大項目已經(jīng)開始全面擁抱它。
另一方面,同樣的代碼,在"嚴格模式"中,可能會有不一樣的運行結果;一些在"正常模式"下可以運行的語句,在"嚴格模式"下將不能運行
在進行MicrosoftAjax請求時
var request = new Sys.Net.WebRequest();
request.set_url("http://********");
request.set_httpVerb("POST");
var body ="cmd=***&scode=***&level=***&enc=***"
request.set_body(body);
request.get_headers()["Content-Length"] =body.length
request.add_completed(addParagraphs);


注釋掉嚴格模式問題解決
注釋:MicrosoftAjax詳解??http://www.cftea.com/c/2009/05/L8D51N1N8BLHFOWU.asp
現(xiàn)在問題:Ajax請求跨域問題MicrosoftAjax同jq Ajax一樣同樣存在跨域問題
內嵌網(wǎng)站頁面進行數(shù)據(jù)的請求加載處理 外接應用程序只負責加載頁面及 文本的交互
對于office外接應用程序內部網(wǎng)頁 與iframe交互 并操作word的功能
在此建立一套通信機制 詳情在:iframe跨域通信解決方案
添加引用文獻到光標位置api
var range = context.document.getSelection();
range.insertText(text,
Word.InsertLocation.After);//text為需要插入的文本內容
添加圖片:inlinePictureObject.insertHtml(html,
insertLocation);
OFFICE內部請求iframe地址的安全攔截問題
原因是默認office內部程序發(fā)的根請求是https也就是說~remoteAppUrl是https路徑,這樣訪問對應iframe下內嵌http網(wǎng)址ie的安全機制就會阻止這種混合模式,解決方式1.ie瀏覽器允許混合模式2.改變xml下remoteAppUrl為http請求,顯然我們不能用方案1
--項目屬性下 關閉ssl項目F4
--另外也可以用后臺方法重定向 一下iframe的src,但是 重定向后 這個iframe里 還會不斷發(fā)http的資源請求 也會被阻止,導致的效果就是 頁面顯示元素缺失
Office插件圖片的插入html

var sourceUrl = this.Url + param.src;
Word.run(function (context) {
var range = context.document.getSelection();
if (param.type == "img") {
range.insertHtml('',Word.InsertLocation.After);
} else if (param.type == "audio") {
range.insertHtml('',Word.InsertLocation.After);
}
}).catch(function (error) {
console.log('Error: ' + JSON.stringify(error));
if (error instanceof OfficeExtension.Error) {
console.log('Debug info: ' +JSON.stringify(error.debugInfo));
}
});
當服務器資源目錄移除后 圖片便不能使用

注:他是一個在線的資源 即URL請求的圖片,現(xiàn)在需要改成本地存儲base64
/**
*圖片轉base64
* @param {any} url
* @param {any} callback
* @param {any} outputFormat
*/
function convertImgToBase64(url, callback,outputFormat) {
var canvas = document.createElement('CANVAS'),
ctx = canvas.getContext('2d'),
img = new Image;
img.crossOrigin = 'Anonymous';
img.onload = function () {
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL(outputFormat ||'image/png');
callback.call(this, dataURL);
canvas = null;
};
img.src = url;
}
使用
var sourceUrl = this.Url + param.src;
var _ = this;
if (param.type == "img") {
window.convertImgToBase64(sourceUrl, function(base64Img) {//data:image/png;base64,
//range.insertHtml('
+'"/>', Word.InsertLocation.After);不可用
_.cacheImg = base64Img;
Word.run(function (context) {
var range = context.document.getSelection();
//data:image/jpg;base64,
var newBase64Img =
_.cacheImg.substr(_.cacheImg.indexOf(",") + 1, _.cacheImg.length);//從第一個逗號開始截取后面的base64
range.insertInlinePictureFromBase64(newBase64Img,Word.InsertLocation.After);
return context.sync().then(function () {
console.log('PictureFromBase64 added to the beginningof the range.');
});
}).catch(function (error) {
console.log('Error: ' + JSON.stringify(error));
if (error instanceof OfficeExtension.Error) {
console.log('Debug info: ' + JSON.stringify(error.debugInfo));
}
});
});