通過ajax打開的第二頁不觸發javascript

我在頁面A.html和頁面B.html調用.js文件$(document).ready()內有一些jQuery代碼，並且工作正常。

在頁A.html有一個鏈接可以通過使用引導模式的ajax打開B.html。

頁B.htmlA.html頁面，模式上打開如預期，但所有的B.html JavaScript沒有被渲染，即使它已經存在。

所以，我目前的解決方法使其工作，這對我來說不太自然，就是將所有代碼放入這樣的函數中。

$.fn.myFunction = function() { 
    // my code here 
};

，然後檢測AJAX，老毛病又犯EVAL並調用該方法

$(".btn-that-opens-modal").on("ajax:success", function(e, data, status, xhr) { 
    eval(xhr.responseText); 
    $("body").MyFunction(); 
});

有沒有更好的方式來做到這一點？

來源

2014-07-12 Martin

-1

如果您從域名以外的地方獲取它，則javascript不會運行，這是由於same origin policy。如果您使用ajax從某個第三方獲取頁面，他們可能會嵌入惡意JavaScript，如果您的瀏覽器立即執行它，您會遇到一些問題....如果您需要從除您的域以外的地方檢索腳本，請使用Ethan Browns answer 。但是，如果嵌入JavaScript的HTML從您的域中檢索，那麼JavaScript應該運行。例如，如果我有一個index.html和一個modal.html。

的index.html

<!doctype html> 
<html> 
<head> 
</head> 
<body> 
    <div id="fetch-modal">modal popup</div> 
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
    <script> 
    $('#fetch-modal').click(function(e) 
     $.ajax({ 
     type: 'get', 
     url: 'modal.html', 
     success: function(html) { 
      $('body').append(html); 
     } 
     }); 
    }); 
    </script> 
</body> 
</html>

modal.html

<script> 
    console.log('hey'); 
</script>

點擊DIV＃鏈接嵌入的腳本將被追加到的index.html的身體，控制檯將退出時'嘿'。我希望這可以進一步澄清我在編輯前的答案時想說的話。我對不清楚和錯誤的道歉。

來源

2014-07-12 15:13:47 Wilfred

好的，但如果JavaScript是在頁面A上，當通過模態加載時爲什麼不能立即在頁面B上使用？即使使用eval作爲我上面的例子，我需要手動重新加載函數使其工作。 – Martin

Wilfred，這個答案是不正確的。特別是，聲明「JavaScript不會出於安全原因運行」。 jQuery *將確實運行通過AJAX加載的JavaScript，當它加載到DOM *中時，只要遵守* CORS限制。查看我的答案以獲取更多信息。 –

@Martin我認爲你遇到了一個問題，即頁面A上的JavaScript已經在$（document）.ready上運行，所以當你在$（document）.ready中加載B.html時，再次運行它適用於B. – Wilfred

只要符合cross-origin resource sharing (CORS)要求，jQuery AJAX調用就會在JavaScript中插入DOM時執行JavaScript。

例如，如果以下兩個相同的服務器和上不使用file://協議，這將很好地工作：

A.html：

<sript src="//code.jquery.com/jquery-1.11.1.min.js"></script> 
<script> 
    $(document).ready(function(){ 
     $('#my-modal').load('B.html'); 
    }); 
</script> 
<div id="my-modal"></div> 
<div id="test"></div>

B.HTML：

<h1>B Modal</h1> 
<script> 
    // note that it's not necessary to wrap this in a $(document).ready 
    // function; since this is designed to be loaded by jQuery AJAX from 
    // a $(document).ready function, we can assume the document is ready. 
    // however, it won't hurt or cause any issues to use a $(document).ready 
    // function here 
    $('#test').html('I come from B...'); 
</script>

所以注意兩個重要的注意事項：

兩個A.html和B.html在同一臺服務器（或Access-Control-Allow-Origin頭已正確設置）：

如果A.html嘗試加載B.html通過來自不同服務器的AJAX，請求受到CORS的約束。除非在提供B.html的服務器上配置了適當的標頭（Access-Control-Allow-Origin），否則瀏覽器將拒絕加載它（包括JavaScript執行）。

您不能使用file://協議：如果你剛剛創建.html文件，然後在瀏覽器中加載它們（通過雙擊等）

，你裝起來暗示與file://協議。至少在Chrome上，您不允許使用file://協議加載AJAX腳本。所以你必須設置一個服務器來使這個功能起作用。

我測試此代碼與以下節點/快速應用：

var express = require('express'); 

var app = express(); 

app.get('/a(.html)?', function(req, res) { 
    res.sendfile('A.html'); 
}); 

app.get('/b(.html)?', function(req, res) { 
    res.sendfile('B.html'); 
}); 

app.listen(3000, function() { 
    console.log('listening on 3000'); 
});

和它的工作如預期。

來源

2014-07-12 16:28:56

通過ajax打開的第二頁不觸發javascript

回答

相關問題