如何在不接触索引的情况下将外部 javascript 标签添加到 Ember JS 应用程序.html?



是否可以在不接触索引的情况下在Ember中加载外部javascript资源.html?

如果我添加到 html,我会简单地添加以下内容就可以了。

<script type="text/javascript">var my_data = [{ foo: "bar", value: 1.234 }];</script>
<script type="text/javascript" async src="https://external.com/file.js"></script>
</body>

我尝试使用 jQuery 附加标签,但它实际上不会在客户端上启动 javascript:

$('body').append('<script type="text/javascript">var my_data = [{ foo: "bar", value: 1.234 }];</script>');
$('body').append('<script type="text/javascript" async src="https://external.com/file.js"></script>');

file.jsmy_data发送到external.com的地方。

不幸的是,我正在为无法访问index.html的客户构建单页应用程序。您建议附加两个脚本标记吗?可能吗?


情况变得更糟。我需要在用户点击事件后再次external.com发送my_data

在传统的html环境中,我会执行以下操作:(这有效)

页1.html:

<a href="/page2.html">user action to track</a>
<script type="text/javascript">var my_data = [{ foo: "bar", value: 1234 }];</script>
<script type="text/javascript" async src="https://external.com/file.js"></script>
</body>

页2.html:

<script type="text/javascript">var my_data = [{ foo: "qux", value: 4321 }];</script>
<script type="text/javascript" async src="https://external.com/file.js"></script>
</body>

如何在 Javascript 中,在单页应用程序上实现相同的结果,而无需触摸索引.html?

如果您使用的是 ember-cli,则可以尝试 ember-cli-head 插件。

否则,您可以尝试将回答此问题和应用程序初始值设定项中描述的 js 技术之一结合起来

供应商目录,这是复制和粘贴的第三方JavaScript的常见主页。

在您的情况下,下载外部/第三方JavaScript文件并将其粘贴到app-name/vendor/ext-js-file-name.js

然后你需要ext-js-file-name.js导入ember-cli-build.js文件

module.exports = function(defaults) {
...
app.import('vendor/ext-js-file-name.js');
...
}

完成此操作后,请restart您的余烬服务器。因此,在ember-cli-build.js下导入的 js 文件被编译包含在 ember 应用程序的头部,然后可以在应用程序的不同位置全局使用。

不再需要将 js 包含在index.html

如果您需要有关资产、依赖项和编译的更多详细信息,请查看官方 ember documentaton 页面的资产编译。

你可以安装插件ember-cli-inline-content

然后添加到索引中.html<body>

{{content-for "your-script-name"}}

然后在里面ember-cli-build.js

...
inlineContent: {
'your-script-name' : {
file: './public/assets/externalJs/your-script.js'
}
}

外部脚本public/assets/externalJs/your-script.js

<script type="text/javascript">
var my_data = [{ foo: "bar", value: 1234 }];
</script>

再次运行ember s

希望这有帮助

在某处运行它:

<script>
var my_data = [{ foo: "bar", value: 1.234 }];
var jq = document.createElement('script');
jq.src = "https://external.com/file.js?version=20190320114623";
document.getElementsByTagName('head')[0].appendChild(jq);
</script>

通过添加您知道每次文件更改时都会更改的内容(文件修改日期的时间戳或您可以控制的变量)来控制 .js 文件的缓存。

编辑

最新更新