个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试在 <head> 中加载外部脚本，如下所示:
<script async type='text/javascript' src='//externalprovider.net/our_script.js'></script>
这个脚本声明了一个函数 window.manager.loadFunction(sid, mid);，然后我在一些组件中使用它，如下所示:
componentDidMount() {
window.manager.loadFunction(this.props.ids[0], this.props.ids[1]);
}
我的问题是从外部提供程序获取的脚本足够慢，因此组件有时间在脚本准备好之前安装。这会产生错误 Uncaught TypeError: Cannot read property 'loadFunction' of undefined 。
为了检查，我复制了完整内容并将脚本粘贴到 <head> 中，其工作完全符合预期。所以我的结论是，脚本从外部提供商加载的速度太慢。不幸的是，这对我们不起作用，因为外部提供者需要能够动态更改脚本，所以我不能将其硬编码在我们的 <head> 中。
所以我想我应该创建一个使用 axios 加载脚本然后对其进行评估的服务，如下所示:
async getAdsScript() {
try {
const url = '//externalprovider.net/our_script.js';
const src = (await axios.get(url)).data;
const head = document.getElementsByTagName('head')[0];
const newScriptTag = document.createElement('script');
newScriptTag.type = 'text/javascript';
newScriptTag.async = true;
newScriptTag.text = src;
head.appendChild(newScriptTag);
PubSub.publish('AdsScript.loaded', true);
} catch (error) {
console.warn(error);
}
}
然后我想像这样使用它:
loadFunction() {
window.manager.loadFunction(this.props.ids[0], this.props.ids[1]);
}
componentDidMount() {
PubSub.subscribe('AdsScript.loaded', (msg, showing) =>
this.loadFunction());
}
但这也不起作用，因为我收到了 CORS 错误 Access to XMLHttpRequest at 'https://externalprovider.net/our_script.js' from origin 'https://dev.testserver.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.，不幸的是我们不能要求他们将 CORS 策略添加到他们的服务器。
有人知道我该如何解决这个问题吗？
最佳答案
是的，正如您已经回答的那样，您可以从脚本标记中删除异步属性。但是，您的页面将被阻止，直到加载外部脚本。如果您与外部服务器的连接速度较慢，这可能会导致您的应用程序初始化缓慢。
如果您想执行 JS 代码并渲染应用程序直到外部脚本加载，您可以执行以下两种操作之一:
或者
Deferred 等待外部脚本加载。你可以在 npm 上的某个 lib 中找到 Deferred 或自己编写。这就是它的样子:<script>
function Deferred() {
let resolve = null;
let reject = null;
const promise = new Promise((res, rej) => {
resolve = res;
reject = rej;
});
return {
promise,
resolve,
reject
}
}
window.waitForExternalScript = Deferred();
function onExternalScriptLoad() {
window.waitForExternalScript.resolve();
}
</script>
<script type="text/javascript" src="./your_main_script_here.js"></script>
<script async type="text/javascript" src="//externalprovider.net/our_script.js" onload="onExternalScriptLoad()"></script>
然后在您的应用程序中:
componentDidMount() {
window.waitForExternalScript.promise.then(() => {
window.manager.loadFunction(this.props.ids[0], this.props.ids[1])
})
}
关于javascript - React : Loading scripts in <head> takes long time, 无法使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55829457/
25
4
0
我找到了long int long和 int long long可以编译为变量类型。 long int long有什么区别吗, int long long , long long和 long long
我无法找出为什么“加密”函数仍然将“消息”读取为字符串，尽管我已经使用不同的方法将数据类型更改为字节。 错误消息是“Prince 类型中的方法 Encrypt(long, long, long, lo
这个问题在这里已经有了答案: Is "long long" = "long long int" = "long int long" = "int long long"? (4 个答案) 关闭 6 年
我正在从 Java 过渡到 C++，并且对 long 数据类型有一些疑问。在 Java 中，要保存大于 232 的整数，您只需编写 long x;。但是，在 C++ 中，long 似乎既是数据类型又是
clang-tidy 12.0.1 报告了一个相当奇怪的警告。在以下代码中: #include int main() { std::vector v1; const auto a =
我创建了一个 pair 和 long long int 的映射 - map,long long int >; 和一个交互器 - map, long long int >::iterator it1;
我想知道 unsigned long long 和 unsigned long long int 的主要区别。它们可以互换使用吗？ 对于像 9223372036854775807 这样的大十进制数的计
我看到的大多数代码都使用缩写类型来声明变量，例如 long long x; // long long int x short y; // short int y 我浏览了 C++11 标准(第 3.9
common_type::type是 unsigned long因为关于积分提升后的操作数，标准说... [...] if the operand that has unsigned integer
long long int A = 3289168178315264; long long int B = 1470960727228416; double D = sqrt(5); long lon
这些新数据类型的目的是什么？我通常只使用“int”或“long”，但为什么会存在这些呢？它们带来了什么新功能或用途？ 最佳答案 long int一直是long的全称，只是很少用而已。 long lon
我正在运行以下for循环 for(unsigned long long int i = N-1; i >= 0; i--){ cin>>L[i]; } 当程序到达这个代码段时，它停止响应。但是
最近问了一个关于递归导致这个问题的问题 注意-> count() 函数返回键 K 在 map 容器中出现的次数。如果键存在于容器中，则返回 1，因为映射仅包含唯一键。如果 map 容器中不存在键，则返
好的，所以我正在尝试实现客户端 - 服务器程序(套接字编程)。 我的客户发送一个嵌入字符串中的 long long int，如下所示: char copy[10]; sprintf(send_data
如果我有任务 Long c = a + b; 有没有一种简单的方法来检查 a + b 不大于/小于 Long.MAX_VALUE/Long.MIN_VALUE？ 最佳答案 使用 Guava , 就这么
我需要制作一个 Comparator 来根据它的 long 类型的变量之一对我的对象列表进行排序。 public class ParticipantIndexComparator implements
假设我有这两种类型: typedef unsigned long long uint64; typedef signed long long sint64; 我有这些变量: uint64 a = ..
long long 和 long 有什么区别？而且它们都不适用于 12 位数字 (600851475143)，我是不是忘记了什么？ #include using namespace std; int
当结果将大于 C 中的 long long int 时，是否有可能对两个不同的 long long int 变量求和？ 最佳答案 由于 OP 想要“在屏幕上打印结果”，因此将数字分成两部分:Most-
实际上我必须找到从源顶点到所有其他顶点的最短路径。为此，我获得了下面给出的代码模板。我想实现“Bellman–Ford algorithm”。 #include #include #include
我是一名优秀的程序员,十分优秀！