我正在开发的项目需要在客户的Web页面上使用jQuery.客户将插入我们将提供的一大块代码,其中包括一些<script>在<script>-created 中构建窗口小部件的元素<iframe>.如果他们还没有使用最新版本的jQuery,那么这也将包括(最有可能)<script>Google的托管版jQuery.
问题是一些客户可能已经安装了旧版本的jQuery.虽然这可能有用,如果它至少是一个相当新的版本,我们的代码确实依赖于jQuery库中最近引入的一些功能,所以当客户的jQuery版本太旧时必然存在实例.我们不能要求他们升级到最新版本的jQuery.
是否有任何方法可以加载更新版本的jQuery,仅在我们的代码上下文中使用,不会干扰或影响客户页面上的任何代码？理想情况下,也许我们可以检查jQuery的存在,检测版本,如果它太旧,那么以某种方式加载最新版本只是用于我们的代码.
我有想法<iframe>在客户的域中加载jQuery ,也包括我们的<script>,这似乎可能是可行的,但我希望有更优雅的方式来做到这一点(更不用说没有性能和复杂性的惩罚了额外的<iframe>s).
我试图找到这个JavaScript方法调用的jQuery等价物:
document.addEventListener('click', select_element, true);
我已经达到了:
$(document).click(select_element);
但这并没有达到与JavaScript方法的最后一个参数相同的结果 - 一个布尔值,指示事件处理程序是否应该在捕获或冒泡阶段执行(根据我的理解来自http://www.quirksmode.org) /js/events_advanced.html) - 被遗漏了.
如何使用jQuery指定该参数或以其他方式实现相同的功能？
我正在尝试找到一种相对简单可靠的方法,使用JavaScript(或jQuery)从字符串变量中提取基本URL.
例如,给出如下内容:
http://www.sitename.com/article/2009/09/14/this-is-an-article/
我想得到:
http://www.sitename.com/
正则表达式是最好的选择吗？如果是这样,我可以使用什么语句将从给定字符串中提取的基本URL分配给新变量？
我已经对此进行了一些搜索,但我在JavaScript世界中找到的所有内容似乎都围绕着使用location.host或类似方法从实际文档URL收集此信息.
我今天遇到了以下网址:
http://www.sfgate.com/cgi-bin/blogs/inmarin/detail??blogid=122&entry_id=64497
注意查询字符串开头的加倍问号:
??blogid=122&entry_id=64497
我的浏览器似乎没有任何问题,并运行快速书签:
javascript:alert(document.location.search);
刚刚给了我上面显示的查询字符串.
这是一个有效的URL吗？我之所以如此迂腐(假设我是)是因为我需要为查询参数解析这样的URL,并且支持加倍的问号需要对我的代码进行一些更改.显然,如果他们在野外,我需要支持他们; 我很好奇,如果我没有完全遵守URL标准,或者它实际上是非标准URL.
我试图在另一个字符串中找到所有出现的字符串的位置,不区分大小写.
例如,给定字符串:
I learned to play the Ukulele in Lebanon.
和搜索字符串le,我想获取数组:
[2, 25, 27, 33]
两个字符串都是变量 - 也就是说,我不能对它们的值进行硬编码.
我认为对于正则表达式来说这是一个简单的任务,但经过一段时间的努力找到一个可行的表达式之后,我没有运气.
我找到了如何使用这个实例的例子.indexOf(),但肯定有一个更简洁的方法来做到这一点？
我有一个项目,我需要使用JavaScript创建一个<iframe>元素并将其附加到DOM.之后,我需要在<iframe>中插入一些内容.它是一个嵌入第三方网站的小部件.
我没有设置<iframe>的"src"属性,因为我不想加载页面; 相反,它用于隔离/沙箱插入我插入的内容,以便我不会遇到CSS或JavaScript与父页面冲突.我正在使用JSONP从服务器加载一些HTML内容并将其插入此<iframe>.
我有这个工作正常,有一个严重的例外 - 如果在父页面中设置document.domain属性(它可能在部署此小部件的某些环境中),Internet Explorer(可能是所有版本,但我已经当我尝试访问我创建的<iframe>的文档对象时,在6,7和8中确认给了我"访问被拒绝"错误.它不会在我测试的任何其他浏览器中发生(所有主要的现代浏览器).
这是有道理的,因为我知道Internet Explorer要求您将所有窗口/框架的document.domain设置为相互通信到相同的值.但是,我不知道有任何方法可以在我无法访问的文档上设置此值.
是否有人知道这样做的方法 - 以某种方式设置此动态创建的<iframe>的document.domain属性？或者我不是从正确的角度看待它 - 有没有另一种方法可以实现我的目标而不会遇到这个问题？我确实需要在任何情况下使用<iframe>,因为隔离/沙盒窗口对于此小部件的功能至关重要.
这是我的测试代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Document.domain Test</title>
<script type="text/javascript">
document.domain = 'onespot.com'; // set the page's document.domain
</script>
</head>
<body>
<p>This is a paragraph above the <iframe>.</p>
<div id="placeholder"></div>
<p>This is a paragraph below the <iframe>.</p>
<script type="text/javascript">
var iframe = document.createElement('iframe'), doc; // create <iframe> element
document.getElementById('placeholder').appendChild(iframe); // append <iframe> element to …我最近尝试创建这样的对象:
var carousel = {
$slider: $('#carousel1 .slider'),
panes: carousel.$slider.children().length
};
我的意图是通过缓存$('#carousel1 .slider')对象属性的结果来提高jQuery的选择器性能,并保持代码简洁和相对干燥.
但是,这不起作用.当代码执行时,它在尝试解析值时抛出异常panes,抱怨carousel未定义.
这是有道理的,因为我假设carousel在赋值语句完全执行之前没有完全声明.但是,我想避免诉诸于此:
var carousel = {};
carousel.$slider = $('#carousel1 .slider');
carousel.panes = carousel.$slider.children().length;
这并没有太糟糕,但是carousel对象将有更多依赖于其他属性值的属性,因此很快就会变得冗长.
我尝试过使用this,但无济于事.我可能没有正确使用它,或者这可能不是一个有效的方法.
对象的属性是否有一种方法可以引用同一对象的其他属性,而该对象仍然被声明？
基于Matthew Flaschen和casablanca的答案(谢谢,伙计们!),我认为这些是我最终得到的实际代码的版本,基于每种方法:
// Matthew Flaschen
var carousel = new (function() {
this.$carousel = $('.carousel');
this.$carousel_window = this.$carousel.find('.window');
this.$carousel_slider = this.$carousel.find('.slider');
this.$first_pane = this.$carousel.find('.slider').children(':first-child');
this.panes = this.$carousel_slider.children().length;
this.pane_gap = this.$first_pane.css('margin-right');
})();
和
// casablanca
var $carousel = $('.carousel'),
$carousel_slider = …javascript properties declaration object variable-assignment
我是一个初学者到中级的JavaScript/jQuery程序员,因此非常感谢具体/可执行的例子.
我的项目需要使用AJAX来轮询返回包含要添加到DOM的内容的JSON的URL,或者使用消息{"status":"pending"}来表示后端仍在使用内容生成JSON响应.这个想法是对URL的第一个请求触发后端开始构建JSON响应(然后缓存),后续调用检查这个JSON是否准备就绪(在这种情况下它是提供的).
在我的脚本中,我需要以15秒的间隔轮询此URL,最多1:30分钟,并执行以下操作:
我尝试了一些方法,但成功有限,但我觉得它们比他们需要的更加混乱.这是一个骨架函数,我成功地使用它来一次制作一个AJAX请求,如果我从JSON响应中获得可用内容,它就能完成它的工作:
// make the AJAX request
function ajax_request() {
$.ajax({
url: JSON_URL, // JSON_URL is a global variable
dataType: 'json',
error: function(xhr_data) {
// terminate the script
},
success: function(xhr_data) {
if (xhr_data.status == 'pending') {
// continue polling
} else {
success(xhr_data);
}
},
contentType: 'application/json'
});
}
但是,除非收到包含可用内容的有效JSON响应,否则此函数当前不执行任何操作.
我不知道该怎么做只是评论.我怀疑另一个函数应该处理轮询,并_根据需要调用ajax request(),但我不知道ajax _request()将其结果传递回轮询函数的最优雅方式,以便它可以适当地响应.
很感谢任何形式的帮助!如果我能提供更多信息,请告诉我.谢谢!
我正在尝试使用JavaScript创建<iframe>,然后将<script>元素附加到<iframe>,我想在<iframe> d文档的上下文中运行.
不幸的是,我似乎做错了 - 我的JavaScript似乎成功执行,但<script>的上下文是父页面,而不是<iframe> d文档.当浏览器请求iframe_test.js时,我在Firebug的"Net"选项卡中也会收到301错误,但它会再次请求它(不知道为什么？)成功.
这是我正在使用的代码(现场演示http://onespot.wsj.com/static/iframe_test.html):
iframe_test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title><iframe> test</title>
</head>
<body>
<div id="bucket"></div>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#bucket').append('<iframe id="test"></iframe>');
setTimeout(function() {
var iframe_body = $('#test').contents().find('body');
iframe_body.append('<scr' + 'ipt type="text/javascript" src="http://onespot.wsj.com/static/iframe_test.js"></scr' + 'ipt>');
}, 100);
});
</script>
</body>
</html>
iframe_test.js
$(function() {
var test = '<p>Shouldn\'t this be inside the <iframe>?</p>';
$('body').append(test);
});
一件似乎不寻常的事情是iframe_test.js中的代码甚至可以工作; …
我试图在一个页面中找到一些简单的客户端性能调整,每页收到数百万的页面浏览量.我有一个问题是使用CSS通用选择器(*).
例如,考虑一个非常简单的HTML文档,如下所示:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Example</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
通用选择将适用上述声明的body,h1和p元素,这是因为它们在文档中的唯一.
一般来说,我会从以下规则中看到更好的表现:
body, h1, p {
margin: 0;
padding: 0;
}
或者这具有完全相同的净效应？
通用选择器是否执行了我可能不知道的更多工作？
我意识到这个例子中的性能影响可能非常小,但我希望能够学到一些可能会在实际情况中带来更显着的性能提升的东西.
我不打算在文档的后面用其他样式覆盖通用选择器规则中的样式 - 即,将它用作快速和脏的重置样式表.我实际上正在尝试完全按照我的意图使用通用选择器 - 将规则集应用于文档中的所有元素,一劳永逸.
最后,我希望确定通用选择器是否存在固有的缓慢,或者是否由于滥用滥用而导致说唱不好.如果* { margin: 0; }字面上相当于body, h1, p …