我对大量的dom elmenets和表现有疑问.
假设我在页面上有6000个dom元素,并且当用户与页面交互(用户滚动以创建新的dom元素)(如twitter)时,元素的数量可以增加.
为了提高页面的性能,我只能想到两件事.
它们是否有其他方法可以改善具有大量dom元素的页面？
我试图找到浏览器视口的确切高度和宽度,但我怀疑Mozilla或IE正在给我错误的数字.这是我的身高方法:
var viewportHeight = window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight;
我还没有开始宽度,但我猜它会有类似的东西.
是否有更正确的方法来获取此信息？理想情况下,我也希望该解决方案能够与Safari/Chrome /其他浏览器配合使用.
我正在寻找一个代码片段来获取浏览器窗口中可视区域的高度.
我有这个代码,但它有点被窃听,好像身体没有超过窗口的高度然后它回来短.
document.body.clientHeight;
我尝试过其他一些东西,但它们要么返回NaN,要么与上面相同.
有谁知道如何获得浏览窗口的真实高度？
我在我的响应式wordpress设计中使用谷歌adsense(使用Twitter引导程序.)现在,当网站调整大小时,广告很远,看起来很糟糕.
我可以做些什么来帮助解决这个问题吗？我实际上看到一个网站,看起来有人在较小的屏幕上调整广告...我不确定这是怎么可能的,因为它是java脚本,对吧？
任何反馈都会非常有帮助.谢谢!
有没有办法通过从iframe内部执行脚本来检测iframe的高度和宽度？我需要根据iframe的不同高度/宽度动态定位iframe中的一些元素.
如果同一页面中有多个iframe会有什么区别吗？即每个iframe想要找到自己的尺寸.
Javascript或jquery解决方案受到欢迎.
谢谢!
<iframe src='http://example.com' width='640' height='480' scrolling='no' frameborder='0' longdesc='http://example.com'></iframe>
iframe必须嵌入到其他网站上,正如下面的答案之一所述,我遇到了权限问题.
我一直在调试测试,发现量角器找到了正确的元素,但位置(x和y)没有链接到找到的按钮的位置.当在此元素上调用click时,它会错过并单击错误的位置,从而导致测试失败.
作为一个注释,这些测试似乎在其他机器上运行良好,唯一的区别是测试失败的操作系统是Windows 10？
有谁知道量角器/硒如何确定元素的位置.
提前致谢.
杰克里夫斯
编辑:
在评论后请求一些例子:
要获取页面对象:
browser.get('examplePageAddress')
要获取按钮所在的标题:
var elem = element.all(by.className('header')).get(0)
要获取按钮位于标题内的div:
var div = elem.element(by.name('examplename'))
获得实际按钮
var button = element(by.name('exampleButtonName'))
在实际测试中,调用一个简单的button.click(),这就是按钮大约50px.
通过调试和写入控制台,我已经确认选择了正确的元素[使用.getInnerHTML()]并通过测量按钮的位置确定它大约是50px不同[使用.getLocation()来确定返回的x和y量角器]
selenium google-chrome angularjs selenium-webdriver protractor
我正在开发一个需要在桌面和移动设备上工作的网站.现在我有一个主内容div设置为屏幕宽度的70%.但是,我觉得这对于移动设备来说很小(比如手机,而不是平板电脑),并希望将它提高到90%或95%.我怎么能这样做(比如屏幕尺寸小于5英寸)而不使用非常不可靠的设备浏览器嗅探？我一遍又一遍地听到口头禅"特征检测特征检测特征检测",我理解为什么这是一件好事...但我不知道检测这个问题的"特征"是什么......
谢谢.
我想创建一个响应,移动优化的阅读体验类似于epub/ebook阅读器,如Kindle应用程序,或iBooks,使用动态HTML作为源.
想象一篇长篇文章或博客文章,需要大量垂直滚动才能阅读,特别是在小型移动设备上.我想要做的是将长页面分成多个全屏幕部分,允许用户使用左/右导航箭头和/或滑动手势来"翻阅"整篇文章.
有许多可用的JS库可以创建预定义幻灯片的"幻灯片放映"或"转盘"(使用div或其他容器元素).但是我希望文本和html内容能够动态地重新流动以适应任何设备视口并且仍然可读...就像一个epub/ebook用户界面,如Kindle应用程序或iBooks.因此,对于同一篇文章,手机上会有比平板电脑或桌面视口更多的"页面",如果/当视口大小发生变化时,需要动态创建/调整这些"页面"(比如在移动设备上从纵向切换到横向).
以下是javascript .epub阅读器的示例:epub.js
...注意响应行为.调整视口大小时,所有文本都会重新流动以适应可用空间,增加或减少"页面"的总数.问题是epub.js需要.epub文件作为其源.
我想要的是html页面的相同用户界面和功能.
我搜索并搜索了某种可以开箱即用的库,但却找不到任何东西.
我意识到我可以使用转换脚本将我的html页面转换为.epub文件,然后使用epub.js在浏览器中呈现该文件,但这看起来非常圆润且笨重.使用html作为直接来源,渲染/模仿客户端响应电子书用户体验,模仿或模拟.epub读者用户体验会好得多.
有谁知道这样的事情是否已经存在,或者我怎么能自己建造它？
关键功能是动态/响应式文本重排.当视口尺寸减小时,文本/内容需要回流到下一个"页面"以避免任何垂直滚动的需要.我不知道如何有效地做到这一点.如果我自己编写代码,我可能会使用类似jQuery Columnize插件的东西,将所有列设置为width: 100vw; height: 100vh,以便每列都像一个"页面",然后找出如何在这些"页面"之间创建一个滑动UI.
任何帮助深表感谢!
我试图在我的移动Webview中设置响应点并执行此操作:
var w = window.innerWidth-40;
var h = window.innerHeight-100;
到目前为止,这很有用.但值-40和-100不在视口缩放高度和宽度中.
当我这样做:
var w = window.innerWidth-40vw;
var h = window.innerHeight-100vh;
因为它应该保持响应和相对于视口 - JS不再工作.我认为vh和vw只适用于CSS？我怎样才能在JS中实现这一目标？
请求没有JQuery解决方案 - 只有JS!
谢谢