我最近继承了一些我需要维护的代码,其中一部分是用于在iPad上使用的网络应用程序。
不幸的是,最近的iOS 8更新打破了网络应用程序的一部分。
在一个部分中,web-app包含一个加载在项目列表中的iframe。这个iframe用于在作为web-app运行时只用一根手指滚动,但现在只用两根手指滚动。 *在iOS网络应用中,iframe内容的单指与双指滚动是另外一种蠕虫,而不是我寻求帮助但不是* - 我需要帮助实施我的解决方案。
如果我将内容放在div中,我可以按需要滚动它,但是,我还必须使用一个对象来加载内容(来自单独的页面) - 这就是我的jQuery问题就产生了。
当从加载的列表中选择一个项目时,它会突出显示 - 一旦用户完成并且他/她的选择被提交,则突出显示""然后取消选择项目"使用jQuery删除"突出显示"风格。
这与iframe一起工作正常,但我现在无法改变项目的样式,因为它们包含在div和对象中。
以下是一些代码片段,用于说明正在进行的操作:
ORIGINAL(与iframe一起正常使用)
<iframe id="myiframe" src="item_list.html"></iframe>
<script>
function deselect()
{
var itemcount = $('#ItemCount').val();
for (var i = 0; i < itemcount; i++) {
// item ids are named a1, a2, a3, etc.
$("#myiframe").contents().find("#a" + i).css("font-size", "26px");
$("#myiframe").contents().find("#a" + i).css("font-weight", "normal");
$("#myiframe").contents().find("#a" + i).css("color", "#3A3B3B");
}
}
</script>
MY ATTEMPT(不工作)
<div id="myiframe">
<object id="myloader" type="text/html" data="item_list.html" ></object>
</div>
<script>
function deselect()
{
var itemcount = $('#ItemCount').val();
for (var i = 0; i < itemcount; i++) {
// item ids are named a1, a2, a3, etc.
//doesn't work - I think contents() is specifically for iframes?
$("#myiframe, #myloader").contents().find("#a" + i).css("font-size", "26px");
// none of these work
var path = "#myiframe, #myloader, #a" + i ;
var path = "#myiframe, #a" + i ;
var path = "#myloader, #a" + i ;
var path = "#a" + i ;
$(path).css("font-size", "26px");
// none of these work
var path = "#myiframe, #myloader" ;
var path = "#myiframe" ;
var path = "#myloader" ;
$(path).find("#a" + i).css("font-size", "26px");
// someone suggested using data() but it didn't work for me
// either AND I don't think that that's how it's used anyhow
}
}
</script>
不可否认,我并不是一个真正的jQuery人,但这似乎应该相当容易......
提前感谢您提供的任何帮助。
答案 0 :(得分:2)
尽管我认为使用ajax将内容加载到div(和单个DOM)中会更好,但我找到了一种在<object>
元素中访问文档的方法。
$("#a0", $("#myloader")[0].contentDocument)
将选择a0
数据中保存的文档中的object
元素。
jquery选择的第二个参数是要搜索的上下文,$("#myloader)[0]
返回HTMLObjectElement(相当于document.getElementById('myloader')
,contentDocument
返回HTML通过data
属性检索的文档。
function deselect()
{
var itemcount = $('#ItemCount').val();
for (var i = 0; i < itemcount; i++) {
// item ids are named a1, a2, a3, etc.
//searches the content document within the object tag
$("#a"+i, $("#myloader")[0].contentDocument).css("font-size", "26px");
// I still think you should use .addClass() and .removeClass()
// (or data attributes if you want to be super fancy),
// changing the styles with CSS,
// rather than manipulate the styles directly in javascript.
}
}
答案 1 :(得分:0)
是否有使用<object>
元素的原因? Jquery有一个方法.load()
,它将请求并将返回的data / html插入到元素中。 http://api.jquery.com/load/
<div id="myiframe">
<div id="myloader"></div>
</div>
然后你会加载数据:
<script type='text/javascript'>
$(function() {
$('#myloader').load("item_list.html", function() {
//at this point, the elements are in the document:
$('#a0').css("font-size", "26px");
//...
});
});
function deselect() {
var itemcount = $('#ItemCount').val();
for (var i = 0; i < itemcount; i++) {
$('#a'+i).css("font-size", "26px");
//etc.
}
}
</script>
我想补充一点,不是手动编辑javascript中的css,而是使用jquery到.addClass()
,removeClass()
或.toggleClass()
css类,其中包含您正在寻找的样式。