语境:我在用barba js在wordpress网站上做一些页面过渡,每次页面变化时都要加载一些脚本,主要是wordpress插件中的一些jscss文件,这样ajax就会有一些页面变化。
我正在使用barba js在wordpress网站上做一些页面转换,每次页面变化时我都要加载一些脚本,主要是wordpress插件中的一些jscss文件,以便ajax搜索工作。我做了一个方法来接收脚本srchref,然后将元素添加到头部。问题可能是由于我的代码结构不好,或者是由于库的问题,说实话我不知道。
问题是,我的代码只运行了我的第一个脚本。
这段代码只运行我调用的第一个脚本,就像我上面说的,我不知道是我的代码还是库的问题!
代码。
起初,我以为我需要一些超时的代码来工作,所以我做了以下工作
{
namespace: 'product',
beforeEnter(data) {
//loads styles
setTimeout(reloadStyles('ivory-search-styles-css', 'wp-content/plugins/add-search-to-menu/public/css/ivory-search.css?ver=4.4.7'), 500)
//loads javascript files.
setTimeout(reloadScripts('wp-content/plugins/add-search-to-menu/public/js/ivory-ajax-search.js?ver=4.4.7'), 800)
setTimeout(reloadScripts('/wp-content/plugins/add-search-to-menu/public/js/ivory-search.js?ver=4.4.7'), 1000)
setTimeout(reloadScripts('/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=5.1.7'), 1200)
searchTranslations()
// refresh breadcrumbs
let documentAjax = (new DOMParser()).parseFromString(data.next.html, 'text/html');
let breadcrumbsAjax = documentAjax.querySelector('.breadcrumbs')
let breadcrumbs = document.querySelector('.breadcrumbs')
breadcrumbs.innerHTML = breadcrumbsAjax.innerHTML;
logoPath.style.fill = "black"
}
},
这是原始代码(没有超时)。
{
namespace: 'product',
beforeEnter(data) {
reloadStyles('ivory-search-styles-css', '/wp-content/plugins/add-search-to-menu/public/css/ivory-search.css?ver=4.4.7')
reloadScripts('/wp-content/plugins/add-search-to-menu/public/js/ivory-ajax-search.js?ver=4.4.7')
reloadScripts('/wp-content/plugins/add-search-to-menu/public/js/ivory-search.js?ver=4.4.7')
reloadScripts('/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=5.1.7')
searchTranslations()
// refresh breadcrumbs
let documentAjax = (new DOMParser()).parseFromString(next.html, 'text/html');
let breadcrumbsAjax = documentAjax.querySelector('.breadcrumbs')
let breadcrumbs = document.querySelector('.breadcrumbs')
breadcrumbs.innerHTML = breadcrumbsAjax.innerHTML;
logoPath.style.fill = "black"
}
},
先谢谢你 !
编辑:这是方法
const reloadScripts = (scrpSrc) => {
console.log("Script loaded: " + scrpSrc)
var wpcf7 = { "apiSettings": { "root": "/wp-json\/contact-form-7\/v1", "namespace": "contact-form-7\/v1" } };
let head = document.getElementsByTagName('head')[0]
let script = document.createElement('script')
script.src = scrpSrc;
if (script != undefined || script != null) {
head.removeChild(script)
head.appendChild(script)
}
else head.appendChild(script)
}
试着做下面的修改,主要的变化是你在删除和添加脚本之前检查了错误的变量。检查头部是否包含一个脚本,并删除。之后,我做了一些修改,以帮助代码更易读,略微干燥。
const reloadScripts = (scrpSrc) => {
console.log("Script loaded: " + scrpSrc)
const wpcf7 = {
"apiSettings": {
"root": "/wp-json\/contact-form-7\/v1",
"namespace": "contact-form-7\/v1"
}
};
let head = document.querySelector('head'),
headScript = head.querySelector('[src="='+ scrpSrc +'"]'),
script = document.createElement('script');
//checking if head already has a script
if (headScript != undefined || headScript != null) {
head.removeChild(headScript);
}
//then always do this piece. not DRY to have it inside and outside the if stmt
script.src = scrpSrc;
head.appendChild(script)
}