小编Bun*_*gle的帖子

我正在尝试从主机页面访问位于<iframe>中的页面的文档对象.换句话说,我有一个页面中有一个<iframe>,我想在该页面(父页面)上使用jQuery来访问该<iframe>的文档对象.

具体来说,我试图在呈现其内容(onload)后找到<iframe> d文档的高度,以便我可以从父页面调整<iframe>以匹配<iframe>的高度准确的内容.

如果这很重要,则使用JavaScript在主机页面上创建此<iframe>,并且该页面与父页面位于同一个域中.我已经使用过这种代码了:

$('iframe').contents().find('body').append('<p>content</p>');

使用内容填充<iframe>,但我不知道获取<iframe>的文档对象的确切语法.

出于某种原因,我发现很多方法可以从<iframe>(大多数使用纯JavaScript)访问父文档对象,但不是相反.

在此先感谢您的帮助!

我正在使用Zemanta API,每次调用最多可接受8 KB的文本.我正在使用JavaScript从网页中提取要发送给Zemanta的文本,所以我正在寻找一个能够以8 KB的速度截断我的文本的函数.

Zemanta应该自己进行截断(例如,如果你发送一个更大的字符串),但是我需要在进行API调用之前将这个文本稍微移动一下,所以我想保持有效负载尽可能小.

假设8 KB的文本是8,192个字符并且相应地截断是否安全？(每个字符1个字节;每KB 1,024个字符; 8 KB = 8,192个字节/字符)或者,在某些情况下,这是不准确还是仅为真？

是否有更优雅的方法根据实际文件大小截断字符串？

我正在开发一个需要或多或少像素完美的HTML页面,我注意到在Opera 10中,字体比其他浏览器渲染得更大,即使字体大小实际上是相同的.

请参阅Opera 10中的此示例页面以及Firefox 3.6等其他浏览器:

http://troy.onespot.com/static/stack_overflow/opera_font_size.html

或者,这是一个说明问题的屏幕截图:

http://skitch.com/troywarr/d47m1/font-size

"50px"和"46px"文本背后的红色框(两者都具有相应的字体大小)都具有50px的高度.

在Firefox 3.6中,"50px"中"p"的下行与其后面的红色框的底部对齐.在Opera中,"50px"中"p"的下降位于下方; 它是"46px",更接近Firefox中的"50px".这告诉我,Opera在10%的范围内渲染字体太大了.

这与其他正文的问题完全相同,在Opera 10中完全抛弃了我的页面布局.如果您对可能导致此问题的原因有任何想法,或者至少如何预防/修复它,请告诉我.

谢谢!

更新:

似乎我没有安装Helvetica的正确副本 - 我从字体堆栈中删除了它,并且在我的测试页面上看到的渲染文本没有区别.

我更新了测试页面只使用通用的"sans-serif"字体系列,所以希望我们现在都看到同样的事情.

有趣的是,使用通用的"serif"字体在Opera和Firefox中显示完全相同.

这个问题可能只是一个关于Opera如何显示通用"sans-serif"字体的怪癖？

更新2:

这可能很重要:我使用的是Mac OS X Snow Leopard.我现在正在尝试其他字体,看看我是否可以进一步隔离这个问题.

更新3:

我使用Arial创建了另一个测试页面:

http://troy.onespot.com/static/stack_overflow/opera_font_size_reset_arial.html

现在Opera和Firefox几乎完全匹配!

在这个项目中,我可能会使用Arial代替Helvetica.据我所知,我有一个完整的OS X版本的Helvetica - 所以我不能在不同的用户看到我的页面上的字体之间有任何差异.我会坚持使用久经考验的Arial.

但是,这意味着什么呢？OS X的默认sans-serif字体只是在Opera中呈现奇怪的东西？

请看看这支笔:

http://codepen.io/troywarr/pen/VYmbaa

我在这里做的是:

• 定义SVG符号(<symbol>)
• 定义SVG线性渐变(<linearGradient>)
• 使用该<use>元素来引用我创建的SVG符号
• 在CSS中,定义两个类:
  • external,它引用在定义的线性梯度这个外部.svg文件(右键点击和查看源)
  • internal,它引用了本地HTML中定义的线性渐变(我相信,它实际上与外部文件中的相同)

因为我已将internal类应用于<svg>HTML示例底部的元素,所以应用渐变,呈现蓝色渐变复选标记.这就是我所追求的.

但是,如果您在HTML示例中切换internal类external,则不再显示复选标记:

http://codepen.io/troywarr/pen/vEymKX

当我观看Chrome Inspector的"网络"标签时,我看不到浏览器尝试加载SVG文件.我的语法有问题,还是其他的东西在这里？

根据我发现的一些参考资料,至少看起来我正在做这件事:

• http://www.w3.org/TR/SVG/painting.html#SpecifyingPaint
• http://www.w3.org/TR/SVG/linking.html#IRIReference
• /sf/answers/498269971/

但是,到目前为止我没有尝试过任何东西,这使我能够引用外部.svg文件中定义的线性渐变.

谢谢你的帮助!

我迫切需要一些帮助.

我创建了一个非常平行的<script>,并重现了我在其他地方写过的另一个更复杂的<script>的问题.

这是它的作用:

• 创建一个<iframe>并插入页面上的<div>
• 创建一个文档并将其附加到<iframe>,其中包含一个<script>,它定义了一些函数(包括一个回调函数和一个使用AJAX加载外部<script>的函数)
• 后一个外部脚本只是对回调函数的调用,该函数调用一个创建文档并将其附加到<iframe>的函数; 这应该有效地覆盖<script>

涉及的三个文件是:

• http://troy.onespot.com/static/document_write/index.html(主页)
• http://troy.onespot.com/static/document_write/main.js(加载的第一个<script>)
• http://troy.onespot.com/static/document_write/jsonp.js(由jQuery的$ .ajax()方法加载的<script>)

这一切都适用于Firefox,Safari和Chrome.它崩溃的地方是Internet Explorer和Opera.会发生什么是main.js中的render()函数执行,并且触发了所有三个警报,但<iframe>中的文档没有被覆盖.我无法分辨出正在创建或写入的文档,或者根本不是.

如果我在render()函数的开头添加调试代码(如console.log(document)),那么工作浏览器似乎可以获得现有<iframe>文档的句柄并列出下面包含的属性.Internet Explorer似乎也可以找到某种文档.我只是不知道为什么不让我覆盖它.

这可能是范围问题吗？也许我不正确地使用document.write(),document.open()或document.close()方法,Firefox和其他一些浏览器只是让我逃脱它？

一个可能的线索:如果我把render()函数的内容拿出来(即,只是把它们放在main.js中的load()之后),这样可以正常工作.这告诉我,我不是如何使用document.open()等,但是在执行callback()函数时,文档对象不可用,或者超出了范围,或类似的东西.

这让我非常难过,这是一个非常重要的项目,即将到期.如果它让我摆脱这种干扰,我不会超越黑客或解决方法.任何帮助或见解都将非常感激!

console.log()的文档属性列表:

ATTRIBUTE_NODE: 2
CDATA_SECTION_NODE: 4
COMMENT_NODE: 8
DOCUMENT_FRAGMENT_NODE: 11
DOCUMENT_NODE: 9
DOCUMENT_POSITION_CONTAINED_BY: 16
DOCUMENT_POSITION_CONTAINS: 8
DOCUMENT_POSITION_DISCONNECTED: 1
DOCUMENT_POSITION_FOLLOWING: 4
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32
DOCUMENT_POSITION_PRECEDING: 2
DOCUMENT_TYPE_NODE: 10
ELEMENT_NODE: 1
ENTITY_NODE: 6
ENTITY_REFERENCE_NODE: 5
NOTATION_NODE: 12
PROCESSING_INSTRUCTION_NODE: 7
TEXT_NODE: 3
URL: "http://localhost/projects/test/ajax_loader/document_write/index.html"
activeElement: HTMLBodyElement
addEventListener: function addEventListener() {
adoptNode: function adoptNode() {
alinkColor: ""
all: HTMLCollection
anchors: HTMLCollection
appendChild: function appendChild() …

我已经创建了一个快速测试来展示我正在尝试做的事情:

http://jsfiddle.net/zY3HH/

如果单击"切换宽度"按钮一次,则正方形将花费一秒钟增长到全宽.再次单击它,将需要一秒钟缩小到零宽度.

但是,快速连续两次单击"切换宽度"按钮 - 第二次当正方形增长到其总宽度的一小部分(如10%)时 - 您会注意到动画仍需要一秒钟到将广场返回到零宽度,这看起来很尴尬,IMO.

虽然这种行为是预期的,但我希望后一个动画发生的时间与它所覆盖的宽度成正比.换句话说,如果你第二次点击"切换宽度"时,正方形是其总宽度的10%,我希望它需要大约1/10秒才能缩小到零宽度.

应该相对容易(我认为)使duration属性的值动态化,在click运行jQuery 处理程序时计算,以测量方块的当前宽度并相应地确定持续时间.

但是,我错过了更好的方法吗？jQuery是否提供了一种简单的方法,或者暴露某种方法或属性以使其更容易？

我当前的项目涉及根据提供的选择器从元素及其所有后代收集文本内容.

例如,当提供选择器#content并针对此HTML运行时:

<div id="content">
  <p>This is some text.</p>
  <script type="text/javascript">
    var test = true;
  </script>
  <p>This is some more text.</p>
</div>

我的脚本将返回(经过一些小空格清理):

这是一些文字.var test = true; 这是一些更多的文字.

但是,我需要忽略<script>元素中出现的文本节点.

这是我当前代码的摘录(从技术上讲,它基于一个或多个提供的选择器进行匹配):

// get text content of all matching elements
for (x = 0; x < selectors.length; x++) { // 'selectors' is an array of CSS selectors from which to gather text content
  matches = Sizzle(selectors[x], document);
  for (y = 0; y < matches.length; y++) {
    match = matches[y]; …

我一直在研究一些 JavaScript 代码，在某些条件下，这些代码会延迟加载几个不同的库（Clicky Web Analytics和Sizzle选择器引擎）。

该脚本每天下载数百万次，因此性能优化是一个主要问题。迄今为止，我已经使用了几个标志，例如script_loading并script_loaded尝试确保我不会多次加载任何一个库（通过“加载”，我的意思是在页面加载后通过将<script>元素插入到 DOM 中来请求脚本） .

我的问题是：与其依赖这些在我的代码中变得有点笨拙且难以理解的标志（想想回调和异步代码的所有陷阱），它是否跨浏览器安全（即回到 IE 6 ) 并且<script>在我到达需要这些库之一的代码分支时只调用一个简单的函数来插入元素不会对性能有害？

后者仍将确保我仅在需要时加载任一库，并且还将简化和减轻我的代码库的重量，但我需要绝对确保这不会导致额外的、不必要的浏览器请求。

我的预感是<script>多次附加元素不会有害，因为我认为浏览器应该识别重复的srcURL 并依赖本地缓存副本。但是，你知道当我们假设......

我希望有人足够熟悉各种现代（和不那么现代，例如 IE 6）浏览器的行为，以便能够说明在这种情况下会发生什么。

与此同时，我会写一个测试来尝试直接回答这个问题。我的犹豫只是在我的脚本预期支持的每个浏览器中肯定地验证这可能是困难和繁琐的。

提前感谢您的任何帮助和/或输入！

我刚刚在Firefox 3.6/Mac中遇到过一些奇怪的行为.我怀疑这是一般的Firefox行为.

我创建了两个简单的测试页面,用于更改window.location.href属性以导航到新URL:

• http://troy.onespot.com/static/stack_overflow/redirect.html
• http://troy.onespot.com/static/stack_overflow/redirect_timeout.html

如果您使用以下任一文件尝试以下操作:

• 打开一个新的/空白浏览器选项卡.
• 粘贴URL并点击"Enter".

您会注意到两者之间的一个区别:使用第一个链接,浏览器的"后退"按钮被禁用; 使用第二个,它启用并按照我的预期工作.

两个脚本之间的唯一区别是后者在更改之前设置了一秒的超时window.location.href.

我不知道为什么会发生这种情况,我正在尝试实现第二个脚本的行为("后退"按钮继续按预期工作),而不会给用户造成任何延迟.

我最好的猜测是,Firefox可能通过设置window.location.href与使用该window.location.replace()方法相同来立即"重定向" ,因为我认为开发人员在使用后者时使用前者是很常见的.也许使用setTimeout,因为这导致代码异步运行,失败了这种行为.可能是这样吗？

我没有尝试setTimeout达到预期效果的最小值,但我现在就这样做了.我想弄清楚为什么会发生这种情况.

谢谢!

我正在创建我的第一个用于开源分发的AngularJS模块.我想以一种易于他人消费的方式打包它.

UMD项目提供了一种模式,用于导出与AMD,CommonJS(或至少Node)和浏览器全局变量兼容的JavaScript模块:

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    define(['b'], factory); // AMD
  } else if (typeof exports === 'object') {
    module.exports = factory(require('b')); // Node
  } else {
    root.returnExports = factory(root.b); // browser global (root is window)
  }
}(this, function (b) {
  // use b in some fashion
  return {}; // return a value to define the module export
}));

但是,由于AngularJS有自己的内部模块系统,因此通过简单地调用angular对象上的方法来完成注册模块,即angular.module().因此,UMD模块不需要输出任何东西; 它只需要要求并采取行动angular.就前面的例子而言,我认为这看起来像这样:

(function (root, factory) { …