barba.jsで非同期遷移した際にスクリプトタグが更新されない
解決したいこと
barba.jsで非同期遷移した際にheadにあるスクリプトタグを再読み込みさせたい
発生している問題・エラー
初期表示時は問題いなく動作するがページ遷移すると発火しないスクリプトがある。
該当するソースコード
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://polyfill.io/v3/polyfill.min.js?features=default%2CArray.prototype.find%2CIntersectionObserver" crossorigin="anonymous" defer></script>
<title>test</title>
<script defer src="contact_head.js"></script>
<link href="app.css" rel="stylesheet">
</head>
//barba
import barba from '@barba/core';
import barbaCss from '@barba/css';
barba.use(barbaCss)
// titleタグ以外のmetaタグの情報の書き換えを行う
const replaceHeadTags = target => {
const head = document.head;
const targetHead = target.html.match(/<head[^>]*>([\s\S.]*)<\/head>/i)[0];
const newPageHead = document.createElement('head');
newPageHead.innerHTML = targetHead;
const removeHeadTags = [
"meta[name='keywords']",
"meta[name='description']",
"meta[property^='fb']",
"meta[property^='og']",
"meta[name^='twitter']",
"meta[name='robots']",
'meta[itemprop]',
'link[itemprop]',
"link[rel='prev']",
"link[rel='next']",
"link[rel='canonical']",
"script[type='text/javaScript']" この行でスクリプタタグを更新できそう//
].join(',');
const headTags = [...head.querySelectorAll(removeHeadTags)];
headTags.forEach(item => {
head.removeChild(item);
});
const newHeadTags = [...newPageHead.querySelectorAll(removeHeadTags)];
newHeadTags.forEach(item => {
head.appendChild(item);
});
};
//Googleアナリティクスに送信
const gaPush = () => {
if (typeof ga === 'function') {
ga('send', 'pageview', location.pathname);
}
if (typeof gtag === 'function') {
gtag('config', 'G-WK9GR62C5Y', {'page_path': location.pathname});
}
}
barba.init({
sync: true,
transitions: [
{
async leave() {
const done = this.async();
leaveAnimation();
pageTransition();
await delay(1000);
done();
},
beforeEnter ({ next }) {
replaceHeadTags(next);
gaPush();
},
}
],
views: [
{
namespace: 'other',
afterEnter() {
const otherPageShow = () => {
document.querySelector('.title').classList.add('show');
const showImage = () => {
document.querySelector('.image').classList.add('show');
}
setTimeout(showImage, 500);
}
otherPageShow();
}
}
]
});
//ページ遷移時にページの一番上まで行く
barba.hooks.enter(() => {
window.scrollTo(0, 0);
});
//同じurlの場合、ページ遷移をさせない
const eventDelete = e => {
if (e.currentTarget.href === window.location.href) {
e.preventDefault()
e.stopPropagation()
return
}
}
const links = [...document.querySelectorAll('a[href]')]
links.forEach(link => {
link.addEventListener('click', e => {
eventDelete(e)
}, false)
})
自分で試したこと
removeHeadTagsにscriptを追加すれば"contact_head.js"が更新されると思うのですが書き方が分かりません。
ご教授お願いします。
0
