我正在开发一个Vue组件,它将通过CMS系统放置在多个网站上.我遇到的问题是即使我的js脚本加载顺序是正确的,有时我会收到此错误:
Uncaught ReferenceError: Vue is not defined
at HTMLDocument.<anonymous>
Vue通过cdn加载,它位于组件代码之上.
所有的Vue代码都是这样运行的:
document.addEventListener("DOMContentLoaded", () => {
// here is the Vue code
});
我甚至在DOMContentLoaded事件中添加了一个setTimeout(),但仍然没有做到这一点.
window.onload = function()在所有情况下都不起作用.我还是经常遇到这个错误.脚本加载到正文中.
你知道它可以是另一种方法吗？我想确保在激活Vue代码的那一刻,Vue已加载并准备在页面上初始化.谢谢!
我有一个打字稿应用程序,动态添加指向JS文件的脚本标记.由于一些限制,我不能在html文件中静态定义这些脚本标记,所以我通过typescript动态添加它们,如下所示:
for (let src of jsFiles) {
let sTag = document.createElement('script');
sTag.type = 'text/javascript';
sTag.src = src;
sTag.defer = true;
document.body.appendChild(script);
}
现在,我注意到,当我动态添加脚本标签时,它们似乎不是按照加载顺序的保证.不幸的是,该jsFiles阵列具有相互依赖的脚本.因此,数组中的第二个脚本只能在第一个完全加载后加载.第二个脚本引用第一个脚本中定义的函数.有没有一种方法可以指定脚本在动态添加脚本时的顺序和执行顺序(类似于在html文件中静态定义脚本标记时的排序方式)？
PS我想避免使用onload回调来解决这个问题,因为我注意到我的应用程序性能下降.我的第二个脚本文件非常大,我假设这导致了降级.
目前我正在尝试通过他们的 SDK 将 snapchat 添加到网站
我目前的尝试，无法弄清楚如何将他们的 Dom 脚本转换为加载我的组件时要调用的函数：
export function snapchatSDK() {
return new Promise(resolve => {
const script = document.createElement('script');
script.src = 'https://sdk.snapkit.com/js/v1/create.js';
document.head.append(script);
});
}
class Platforms extends React.Component {
componentDidMount() {
snapchatSDK();
}
render() {
return (
<div>
<p> Share on Social Media Platforms</p>
<h4>Snapchat<h4>
<button
className="snapchat-creative-kit-share"
data-share-url= urlTobeShared()
>
Share me
</button>
<h4>Twitter<h4>
<button>
Share me
</button>
<h4>Reddit<h4>
<button>
Share me
</button>
</div>
);
}
}
这里也是该文档的链接： snap doc
在 React 中，我试图在加载特定组件时动态添加<script>a 。<head>我之前曾将此代码用于类似的事情（使用更简单的脚本）：
componentWillMount() {
var script= document.createElement('script');
script.src = "SOME_URL";
document.body.appendChild(script);
}
但是我现在尝试注入 head 的代码包含缩小的 js （它是 Google Analytics 内容实验代码），如下所示：
<!-- Google Analytics Content Experiment code -->
<script>function utmx_section(){}function utmx(){}(function(){var
k='XXXXXXXXX-Y',d=document,l=d.location,c=d.cookie;
if(l.search.indexOf('utm_expid='+k)>0)return;
function f(n){if(c){var i=c.indexOf(n+'=');if(i>-1){var j=c.
indexOf(';',i);return escape(c.substring(i+n.length+1,j<0?c.
length:j))}}}var x=f('__utmx'),xx=f('__utmxx'),h=l.hash;d.write(
'<sc'+'ript src="'+'http'+(l.protocol=='https:'?'s://ssl':
'://www')+'.google-analytics.com/ga_exp.js?'+'utmxkey='+k+
'&utmx='+(x?x:'')+'&utmxx='+(xx?xx:'')+'&utmxtime='+new Date().
valueOf()+(h?'&utmxhash='+escape(h.substr(1)):'')+
'" type="text/javascript" charset="utf-8"><\/sc'+'ript>')})();
</script><script>utmx('url','A/B');</script>
<!-- End of Google Analytics Content Experiment code -->
我如何动态地将其注入<head>？
更新：我最终使用了他们的客户端解决方案。
html ×3
javascript ×3
reactjs ×2
asynchronous ×1
dom ×1
load-order ×1
sdk ×1
typescript ×1
vue.js ×1