如何在Fetch API请求的HTML页面内执行javascript代码?

时间:2019-04-23 13:59:09

标签: javascript html ecmascript-6 es6-modules

我为此问题发现的唯一相关问题是: page fetched by AJAX cannot execute any javascript

但是我不想使用JQuery。我想使用香草javascript。

问题是我无法执行使用提取API提取的html页面内的任何Javacript。

这是我的文件:

index.html:这是初始HTML页面。它要求一个名为index.js的文件作为ES6模块

<!DOCTYPE html>
<html>

<head>
    <script type="module" src="index.js"></script>
</head>

<body>
    <main id="content" role="main"></main>
</body>

</html>

然后我有我的index.js文件:

import openTemplate from './shared-assets/js/openTemplate.js';

const target = document.getElementById('content');

openTemplate('dashboard.html', target);

这是openTemplate.js文件:

export default function openTemplate(templatePath, targetElement){
    fetch(templatePath).then(response => {
        response.text().then(html => targetElement.innerHTML = html);
    });
}

最后,拒绝执行javascript的dashboard.html模板:

<h1>Dashboard</h1>
<script type="module">
    import myAlertFunction from 'myAlertFunction.js';

    // this is just a function that encapsulates an alert call
    // my real code will have much more complex functions being imported
    myAlertFunction('test');
</script>

所有这些代码都将导致出现这样的情况:在加载我的index.html页面时,将显示带有“ test”文本的警报,但这没有发生。

我希望它在Firefox Quantum> = 66上运行

我想念什么?

0 个答案:

没有答案