Ajax 動態(tài)載入html頁面后不能執(zhí)行其中的js快速解決方法
事件背景
有一個公用頁面需要在多個頁面調(diào)用，其中涉及到部分js已經(jīng)寫在了公用頁面中，通過ajax加載該頁面后無法執(zhí)行其中的js。
解決思路
1. 采用附加一個iframe的方法去執(zhí)行js，為我等代碼潔癖者所不齒。
2. 使用document.write輸出代碼，我等簡潔主義者所不愿。
3. 最簡單的方法是把js放到需要調(diào)用的父頁面，那想這樣的公用頁面，每個地方調(diào)用都要寫入一次，代碼冗余。
4. eval是個解決方法，雖然低效。
5. 復雜的解決方法：正則匹配出加載頁面中的所有js，為這些js創(chuàng)建同樣多個<script>標簽，把js內(nèi)容插入即可執(zhí)行。但使用中發(fā)現(xiàn)，firefox可行，但IE還是不從。（師太，您就從了吧~）
解決方案
綜合以上多種方式，排除不利因素，總結(jié)出一個比較實用的方法，可以滿足類似這樣公用頁面的執(zhí)行ajax加載的js的需求，在ajax加載的公用函數(shù)里面加上代碼即可。主要代碼如下：
// 第一步：匹配加載的頁面中是否含有js
var regDetectJs = /<script(.|\n)*?>(.|\n|\r\n)*?<\/script>/ig;
var jsContained = ajaxLoadedData.match(regDetectJs); //ajaxLoadedData為ajax獲取到的數(shù)據(jù)
// 第二步：如果包含js，則一段一段的取出js再加載執(zhí)行
if(jsContained) {
// 分段取出js正則
var regGetJS = /<script(.|\n)*?>((.|\n|\r\n)*)?<\/script>/im;
// 按順序分段執(zhí)行js
var jsNums = jsContained.length;
for (var i=0; i<jsNums; i++) {
var jsSection = jsContained[i].match(regGetJS);
if(jsSection[2]) {
if(window.execScript) {
// 給IE的特殊待遇
window.execScript(jsSection[2]);
} else {
// 給其他大部分瀏覽器用的
window.eval(jsSection[2]);
}
}
}
}
解說下：window.execScript就IE認，其他瀏覽器需要用eval啦。
總結(jié)
以上所述是小編給大家介紹的Ajax 動態(tài)載入html頁面后不能執(zhí)行其中的js快速解決方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
解決Ajax方式上傳文件報錯"Uncaught TypeError: Illegal invocation"
這篇文章主要介紹了Ajax方式上傳文件報錯"Uncaught TypeError: Illegal invocation"，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
下面小編就為大家?guī)硪黄狝JAX實現(xiàn)簡單的注冊頁面異步請求實例代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
這篇文章主要介紹了ajax異步加載圖片的方法,結(jié)合實例形式較為詳細的分析了ajax圖片異步加載的原理與相關實現(xiàn)技巧,需要的朋友可以參考下2016-02-02
使用wordpress的$wpdb類讀mysql數(shù)據(jù)庫做ajax時出現(xiàn)的問題該如何解決
這篇文章主要介紹了使用wordpress的$wpdb類讀mysql數(shù)據(jù)庫做ajax時出現(xiàn)的問題該如何解決的相關資料,需要的朋友可以參考下2015-10-10
ajax提交到java后臺之后處理數(shù)據(jù)的實現(xiàn)
下面小編就為大家?guī)硪黄猘jax提交到java后臺之后處理數(shù)據(jù)的實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
Django 是由 Python 開發(fā)的一個免費的開源網(wǎng)站框架，可以用于快速搭建高性能，優(yōu)雅的網(wǎng)站.AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）.接下來通過本文給大家介紹django中的ajax，希望對大家有所幫助2016-03-03
ajax(異步javascript xml) 能夠刷新局部網(wǎng)頁數(shù)據(jù)而不是重新加載整個網(wǎng)頁。接下來通過本文給大家介紹Ajax的使用四大步驟，非常不錯，感興趣的朋友看下吧2016-07-07
ajax 入門基礎之 XMLHttpRequest對象總結(jié)
在ajax中有一個最為核心的概念就是 XMLHttpRequest 對象，這篇文章將有助于我們更加深入的理解 ajax 的知識2009-08-08
使用Ajax進行文件與其他參數(shù)的上傳功能(java開發(fā))
這篇文章主要介紹了使用Ajax進行文件與其他參數(shù)的上傳功能(java開發(fā)),非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-01-01
使用ajax接收后臺發(fā)送過來的json數(shù)據(jù)方法
今天小編就為大家分享一篇使用ajax接收后臺發(fā)送過來的json數(shù)據(jù)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08