是否可以在Ember中加载外部javascript资源而无需触及index.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.js
将my_data
送到external.com
。
不幸的是,我正在为无法访问index.html
的客户构建单页面应用程序。你建议附加两个脚本标签?可能吗?
它变得更糟。我需要在用户点击事件后再次将my_data
发送到external.com
。
在传统的html环境中,我会做以下事情:(这是有效的)
page1.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>
page2.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完成相同的结果,而无需触及index.html?
如果您使用的是ember-cli,可以试试ember-cli-head插件。
否则,你可以尝试结合描述in answers to this question和application initializer的js技术之一
你可以安装插件ember-cli-inline-content
然后在<body>
里面加入你的index.html
{{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
希望这可以帮助
供应商目录,它是复制和粘贴的第三方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应用程序的头部,然后可以在应用程序的各个位置全局使用。
没有必要在index.html
下包含js
如果您需要有关资产,依赖关系和编译的更多详细信息,请查看官方ember documentaton页面中的资产编译。
在某个地方运行:
<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文件。
编辑