lad os sige, at jeg har en page.html fil med dette indhold:
<html>
<body>
<h1>Hello World</h1>
<script>var foo_data = "abc"; </script>
</body>
</html>
og derefter på min main.html fil jeg brugte:
<script>
fetch('/page.html')
.then(response => response.text())
.then(data => {
document.getElementById('page-content').innerHTML = data;
console.log(foo_data); // Will not work
})
</script>
Er der en måde at få adgang til foo_data på min main.html fil eller er der bedre måder at gøre dette på?
Svar
Her er eval() metode. Grundlæggende er ideen at analysere html i data variabel, og kør <script> elementer med eval:
fetch('/page.html')
.then(response => response.text())
.then(data => {
const html = document.createRange().createContextualFragment(data);
//this is unnecesary, unless you need to display html
document.getElementById("page-content").innerHTML = data;
for(let i = 0, scripts = html.querySelectorAll("script"); i < scripts.length; i++)
eval(scripts[i].textContent); //execute scripts
console.log(foo_data);
})
.catch(er => console.error(er));
/* ignore below */
async function fetch()
{
return new Promise((resolve, reject) =>
{
resolve(new Promise((resolve, reject) =>
{
resolve({text: () => `<html>
<body>
<h1>Hello World</h1>
<script type="javascript">var foo_data = "abc";</script>
</body>
</html>`});
}))
})
} <div id="page-content"></div>