Ajax中動態執行返回到innerHTML中的js

2021-05-01 01:56:33 字數 1306 閱讀 1449

摘要:

最近在為callbackplus增加乙個類似asp.net ajax的updatepanel和ca的callback一樣的容器無刷更新控制項,利用innerhtml來更新最終生成html**,但是其中的js 指令碼檔案的更新卻是相當的麻煩。對於asp.net ajax中的scriptmanager的呼叫方式比較不滿意,所以自己想了個方法進行處理。

動態插入script:

首先碰到的問題是,生成回來的html(包含html標記和script指令碼)插入到對應的容器的innerhtml中,卻發現script不見 了。結果發現是返回來的指令碼是這樣子的,如果有動態使用document.write 輸出指令碼到頁面的人,可能明白這樣子寫是會出出錯的,一定要把拆開寫才可以(""),修改過後(**如下),html的插入正常了。

但 是這樣子就存在乙個問題了,我需要去替換整個html中的,麻煩。因為容器中的控制項都是我們自己開發的,其中關鍵指令碼的輸 出和html的輸出是可以分開寫的,所以想到是否分成兩部分進行乙個更新,乙個容器放真正的html,乙個容器專門放script,修改**如下:

結果問題又出來,你會發現你的script又丟了,沒有真正插入到divscript容器中。

經過測試,原來如果插入script到innerhtml的話,單單插入script**是不行的,一定要在script之前帶上html,好比上例中的input,而且不能放在script後面,即一定要是這樣子的格式:

+,而不能是或者+.

動態執行script:

經過上面的修改,現在的html和script都已經正確更新到dom中了,但是script中定義的方法卻沒有執行。

要執行字串中的指令碼,我第一步想到的是使用eval。

但是目前html和script是混合一起輸出的,所以需要分離出要執行的script**,然後使用eval。

首先寫了個分離指令碼的函式:

在callback返回的函式中呼叫:

本來以為事情告一段落,結果新的問題又出來了。

通過eval執行的指令碼倒是執行了,但是其中定義類的指令碼卻丟失了,比如:

其中定義類的指令碼(比如變數,比如匿名函式)都無法加到當前的window域內,立即執行的指令碼則正確執行了。看來無法通過eval來執行script的動態輸出了。

搜尋網路上的一些文章之後,得到乙個新的方法,是利用ie本身的機制來執行的。即當節點被移除的時候,ie會重新解析節點內部的html,有指令碼則會執行相關的指令碼,不過這裡面的指令碼必須設定defer屬性才可以。新方法如下:

此方法充分利用了瀏覽器自身的特性,執行效率高,相容性好。唯一的缺點就是指令碼中不能包含 document.write。還有另外乙個方法如下:

Struts2 ajax 執行,返回json格式

struts2 ajax 請求 返回json 資料格式處理流程 第一 ajax 請求 ajax else 第二 strtus 配置檔案 json 格式設定 設定extends為 json default returndata 其他配置說明 root 引數 從返回成果中按照 ognl 表示式取出你須要...

Vue中ajax返回結果賦值

這是第二次在專案中遇到此問題,ajax請求成功後在success函式中為vue例項data裡的變數賦值,卻失敗了 new vue created function 原因在於在ajax的success函式中,this的指向不再是vue的例項,解決辦法可以先把this儲存起來 new vue creat...

TP中的AJAX返回ajaxReturn

系統支援任何的ajax類庫,action類提供了ajaxreturn方法用於ajax呼叫後返回資料給客戶端。並且支援json xml和eval三種方式給客戶端接受資料,通過配置default ajax return進行設定,預設配置採用json格式返回資料,在選擇不同的ajax類庫的時候可以使用不同...