我遇到的问题是页面加载速度如此之快,以至于jquery在后续脚本调用之前尚未完成加载.有没有办法检查jquery的存在,如果它不存在,请稍等片刻,然后再试一次?
在回答下面的答案/评论时,我发布了一些标记.
情况...... asp.net主页和子页面.
在母版页中,我引用了jquery.然后在内容页面中,我引用了特定于页面的脚本.当加载特定于页面的脚本时,它会抱怨"$ is undefined".
我在标记的几个点放置警报,以查看触发事件的顺序,并确认它按此顺序触发:
这是主页顶部的标记:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Reporting Portal</title>
<link href="~/Styles/site.css" rel="stylesheet" type="text/css" />
<link href="~/Styles/red/red.css" rel="stylesheet" type="text/css" />
<script type="text/Scripts" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/Scripts" language="javascript" src="../Scripts/jquery.dropdownPlain.js"></script>
<script type="text/Scripts" language="javascript" src="../Scripts/facebox.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
Run Code Online (Sandbox Code Playgroud)
然后在母版页的正文中,还有一个额外的ContentPlaceHolder:
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
Run Code Online (Sandbox Code Playgroud)
在子页面中,它看起来像这样:
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Dashboard.aspx.cs" Inherits="Data.Dashboard" %>
<%@ …Run Code Online (Sandbox Code Playgroud) 如何将一个<script src="https://remote.com/"></script>元素注入到我的页面中,等待它执行,然后使用它定义的函数?
仅供参考:在我的情况下,脚本会在极少数情况下进行一些信用卡处理,所以我不想总是包含它.我想在用户打开更改信用卡选项对话框时快速包含它,然后向其发送新的信用卡选项.
编辑以获取更多详细信息:我无权访问远程脚本.
它没有给出错误,我把a console.log('loaded userscript wifi-autologin'),console.log作品,但document.addEventListener的预期效果不会发生.在进行了一些调试之后,让它打印出调用了addEventListener,我发现它没有被调用.
脚本来源:
// ==UserScript==
// @name wifi-autologin
// @namespace lf-ns
// @description Hopefully autologins to a captive portal
// @include *://1.1.1.1/*
// @version 1
// @run-at document-end
// ==/UserScript==
document.addEventListener('load', submitAction);
Run Code Online (Sandbox Code Playgroud) 我的元素有 transition: transform .5s
然后它有一个单独的类: transform: translatex(-100%)
所以我想要实现的是,最初,元素位于左侧. 在窗口上载,渲染元素时,我删除了变换类,浏览器会将元素设置为正确的位置.
但实际发生的是,当页面变得可见/渲染时,元素已经处于正确的位置.并且没有动画.
我试过setTimeout(function() {}, 0);它不起作用.如果我setTimeout 1秒,它可以工作,但有时渲染需要很长时间,我必须setTimeout 2秒.但有时它会变得很快,2秒钟需要等待很长时间.
总的来说,我觉得这不是一种可靠或正确的方法.
我怎样才能达到我想要的,正确的方法?
编辑:对不起家伙,在尝试组装演示后,我意识到我没有在窗口上卸载类.这是因为我的元素及其javascript和css都加载了AJAX.所以它可以在窗口加载之前或窗口加载之后发生.
无论如何,现在我的问题是,如果窗口需要很长时间才能加载怎么办?是否有可能在窗口加载之前渲染我的元素?或者浏览器仅在整个窗口完成加载时呈现?
因为我想尽快为元素制作动画.那么,在窗口需要很长时间才能加载(图像和连接缓慢,以及东西)的情况下,等待窗口加载是否安全?
如果我在窗口加载后用AJAX加载元素,我可以通过删除转换立即运行动画吗?或者我应该检测元素何时被渲染?
作为对"网页加载时如何自动将焦点设置为文本框?"问题的回答?,Espo建议使用
<body onLoad="document.getElementById('<id>').focus();">
Run Code Online (Sandbox Code Playgroud)
Ben Scheirman 回复(未作进一步解释):
任何javascript书都会告诉你不要把处理程序放在body元素上
为什么这被认为是不好的做法?在Espos答案中,说明了"覆盖"问题.这是唯一的原因,还是有其他问题?兼容性问题?
我只能访问正文内容而不是页眉或页脚,Jquery被加载到每个页面的页脚中,所以当我的脚本加载到正文中时,它们会出现"$ is not defined"这样的错误.当我尝试在dom上加载脚本时,我仍然会收到错误,因为它仍然在主jquery之前加载.有什么我可以做的事情让脚本脚本之后加载jquery加载?
进一步的解释:我确实搜索了其他用户发布的内容并没有遇到这种特殊情况.我试过一个简单的
$(document).ready(function () {
Run Code Online (Sandbox Code Playgroud)
它不起作用.我正在尝试使表单验证脚本工作并仍然继续
Uncaught TypeError: $(...).validate is not a function
Run Code Online (Sandbox Code Playgroud)
使用下面的答案确实解决了一些问题,但没有解决这个问题.我的代码是:
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript">
window.addEventListener('load', function () {
$.getScript("https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js");
$.getScript("https://ajax.aspnetcdn.com/ajax/jquery.validate/1.17.0/jquery.validate.min.js");
$.getScript("https://ajax.aspnetcdn.com/ajax/jquery.validate/1.17.0/additional-methods.js");
});
</script>
<script type="text/javascript">
window.addEventListener('load', function () {
$('#commentForm').validate({ // initialize the plugin
rules: {
email: {
required: true,
email: true
},
mobile_phone: {
required: true,
phoneUS: true
}
},
submitHandler: function (form) { // for demo
//alert('valid form submitted'); // for demo
var $phone_temp = …Run Code Online (Sandbox Code Playgroud) 我正在使用window.location.href加载页面,现在我已切换到window.onload()功能,但页面不加载一些内容.
window.location.href = $(this).val(); 是我正在使用的代码.
如何使用window.onload()函数编写它?