通过Ajax加载页面时处理脚本加载 [英] Handling script loading when loading page through Ajax
问题描述
有没有一种方法可以处理通过Ajax页面调用加载的脚本?我不想加载那些已经由基础页面首先加载的内容，因为它们有冲突.
Is there a way to handle scripts loading through Ajax page calls? I would like to not load those already loaded in the first place by the base page as they are in conflict.
解决方案是否是针对正常调用(使用脚本)创建多个页面，而针对ajax页面(不包含重复的脚本)创建多个页面?
Is the solution to create multiple pages one for the normal call (with the scripts) one for the ajax ones (without the scripts that are duplicates)?
示例:
base_page:
base_page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
</head>
<body>
<div id="ajax_page"> </div>
<div id="other_ajax_call"> </div>
<div id="second_result"> </div>
</script>
$(document).ready(function(){
$.ajax({
url: '/ajax_page',
type: 'GET',
success: function (result) {
$('#ajax_page').html(result)
}
});
});
$( "#other_ajax_call" ).on( 'click', function() {
$.ajax({
url: '/another_page',
type: 'GET',
success: function (result) {
$('#second_result').html(result)
}
});
});
</script>
</body>
</html>
ajax_page:
ajax_page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
</head>
<body>
<div id="ajax_second_page"> </div>
</script>
$(document).ready(function(){
$.ajax({
url: '/a_third_page',
type: 'GET',
success: function (result) {
$('#ajax_second_page').html(result)
}
});
});
</script>
</body>
</html>
在此示例中，在"base_page"上，我通过本身使用Ajax的Ajax"ajax_page"加载(通常不使用Ajax调用此页面，因此需要保留脚本).
In this example, on the 'base_page' I load through Ajax 'ajax_page' that itself is using Ajax (this page is usually called without Ajax and therefore will need to keep the script).
问题是，完成此操作后，jquery脚本发生冲突，"base_page"(用于"#other_ajax_call")的第二个ajax调用不起作用，并且我收到以下异常:
The problem is that when this is done, the jquery scripts are in conflict and the second ajax call of the 'base_page' (for "#other_ajax_call") is not working and I receive the following exception :
未捕获的TypeError:$ .ajax不是函数
Uncaught TypeError: $.ajax is not a function
This is a repost of Ajax call - Loading page script only if not there in the base page that was closed as I first didn't put enough details and my question was not clear enough and I have no way to reopen it.
推荐答案
由于无论如何您都获得了完整的页面，因此使用ajax这样做毫无意义，尤其是当它破坏了正确的HTML时.您可以做的是使用 iframe 来显示您的页面，然后在父文档中使用一些简单的javascript对其进行管理.
Since you are getting the full pages anyway it doesn't make sense to do that with ajax, especially when it breaks proper HTML. What you could do is to use an iframe to display your pages, and then manage them with some simple javascript in the parent document.
例如:
<!-- iframe for one of your pages -->
<iframe id="page-foo-iframe"
title="page foo"
width="100%"
height="100%"
src="/a_third_page">
</iframe>
<script>
/*
* You can have a button, or something else, call these functions
* whenever you need to show/hide a page.
*/
function showIframePage(id) {
let page = document.getElementById(id);
page.style.display = "block";
}
function hideIframePage(id) {
let page = document.getElementById(id);
page.style.display = "none";
}
</script>
我还建议您考虑使用一种框架，尤其是像Vue/React/Angular之类的JS框架，因为它们将使处理这样的事情变得更加简单和易于维护.不过，如果您必须加载完整的文档，iframe是执行此操作的最佳方法.
I would also suggest that you look into using a framework, in particular the JS ones like Vue/React/Angular, because they will make handling things like this a lot simpler and easier to maintain. If you have to load full documents though, iframes are the best way to do that.
这篇关于通过Ajax加载页面时处理脚本加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
