使用javascript异步下载另一个javascript文件.
我知道这可以通过在页面上插入新的脚本标签并将src属性设置为文件URL来完成.
我还需要在脚本下载完成后运行一些代码.我一直在使用yepnope,它们提供了在脚本完成下载和执行时执行的"回调".
这是如何完成的?
谢谢!
我想通过代码同步包含来自不同域的JavaScript文件.这意味着使用同步XMLHttpRequest将无法正常工作.我也想避免,document.write因为我的代码将在文档完全加载时执行.这甚至可能吗?是否有任何现有的JavaScript库支持该功能?
基本上我希望这个工作:
<script type="text/javascript">
$(document).ready(function() {
load("path_to_jQuery_UI_from_another_domain");
console.log(jQuery.ui.version); //outputs the version of jQuery UI
});
</script>
Run Code Online (Sandbox Code Playgroud)
编辑:
我的想法是创建一个jQuery插件,根据启用的功能加载其JavaScript文件.jQuery插件可以随时初始化,这意味着没有document.write.完全可以异步加载JavaScript文件,但人们希望他们的插件在调用后完全初始化$("selector").something();.因此需要在没有document.write的情况下加载同步JavaScript.我想我只是想要太多.
我通过动态添加脚本并将其src属性设置为我需要请求的域来在javascript中创建跨域请求.供参考:http://alvinabad.wordpress.com/2009/02/13/feb13/
脚本代码:
var script_id = null;
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', crossDomainURL);
script.setAttribute('id', 'script_id');
script_id = document.getElementById('script_id');
if (script_id) {
document.getElementsByTagName('head')[0].removeChild(script_id);
}
Run Code Online (Sandbox Code Playgroud)
现在,我需要解析此请求的响应.我已经检查过fiddler的原始响应.数据在那里,但它不在dom中.它是这样开始的:
<script type="text/javascript">
/* <![CDATA[ */
if (top == self || parent != top || document.location.hostname != document.domain)
{
top.location.replace("http:\/\/www.facebook.com\/?gringotts_redir");}
/* ]]> */
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"**... then the rest
Run Code Online (Sandbox Code Playgroud)
页面源显示我嵌入的javascript,如何解析从该代码生成的数据.
我一直听到很多关于诸如RequireJS之类的脚本加载器.使用脚本加载器而不是在构建过程中连接源文件有什么好处?
'turbolinks:load' 不会在直接加载的页面上触发,但是,在加载了 turbolinks 的页面上,'turbolinks:load' 事件工作正常。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://rawgit.com/turbolinks/turbolinks/master/dist/turbolinks.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>
test
</title>
<script>
function loadScript(src) {
if(!document.querySelector("script[src='"+src+"']")){
var n = document.createElement("script");
n.src = src;
n.async = false;
document.getElementsByTagName("head")[0].appendChild(n);
};
};
</script>
</head>
<body>
<p style='color:red'>
Hi Priority Rendering With inline css to improve start render
</p>
<script type="text/javascript">
loadScript("dynamic_load_turbolinks_script.js");
</script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
dynamic_load_turbolinks_script.js 的代码
console.log('This file will contain all functionally required script');
document.addEventListener("turbolinks:load", function() {
console.log('Inside turbolinkss Load')
});
window.onload = function(){
console.log('Inside window onload') …Run Code Online (Sandbox Code Playgroud) javascript ruby-on-rails dynamic-script-loading domcontentloaded turbolinks
除非需要,我一直试图通过不加载 Zendesk 小部件来节省页面上的资源。
如果我手动添加到页面以下标签一切正常:
<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=[MyKey]> </script>
Run Code Online (Sandbox Code Playgroud)
作为我页面的一部分,我在某个地方始终存在一个 div 标签:
<div id="ze-snippet"> </div>
Run Code Online (Sandbox Code Playgroud)
我想要的是,<script>当用户单击按钮时对该标签执行“动态脚本加载” 。
我目前的尝试是这样的:
<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=[MyKey]> </script>
Run Code Online (Sandbox Code Playgroud)
是否有一个特殊的qooxdooqx.util.DynamicScriptLoader类可以像JavaScript 文件一样动态加载 CSS 文件?
例如,取决于用户选择他想要使用什么地理地图,应用程序会加载特定的 JavaScript 和 CSS 文件。我可以通过类获取.js文件,但对于 css,我使用文件中的部分,它总是加载样式文件(我是对的吗?)。qx.util.DynamicScriptLoaderexternalResourcesManifest.json
当使用importjs()类型的函数时(参见下面的示例),jQuery似乎在其后面的代码之前没有加载.
这是一个示例html文件:
<html>
<head></head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function importjs(jsFile) {
var body = document.getElementsByTagName('head').item(0);
var scpt = document.createElement('script');
scpt.src = jsFile;
scpt.type = 'text/javascript';
body.appendChild(scpt);
}
var f1="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js";
//importjs(f1);
var $j=jQuery;
alert("hello stackoverflow!");
</script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
使用上面的代码,警报应该成功触发.
接下来,注释掉第一个脚本块,即显式加载jQuery的脚本块,并取消注释第二个脚本块中的importjs(f1)行.这个时候,警报并没有开火,至少在Firefox和Safari.
现在,在"var $ j = jQuery"行之前添加一个额外的警报.对我来说,它适用于两种浏览器,无论我等待的时间长短.一个setTimeout可能也可以做到这一点,但它也不是一个像这样编程的理想方法.
如果javascript是单线程的,为什么importjs会失败?是因为importjs创建的新元素在第一个块完成之前不会被"执行",或者新元素是否应该在创建后立即执行?
javascript ×7
jquery ×2
cross-domain ×1
css ×1
dom ×1
lazy-loading ×1
qooxdoo ×1
request ×1
turbolinks ×1
yepnope ×1
zendesk ×1