我最近继承了一些需要维护的代码,其中一部分是打算在 iPad 上使用的网络应用程序。
不幸的是,最近的 iOS 8 更新破坏了上述网络应用程序的一部分。
在一个部分中,网络应用程序包含一个加载到项目列表中的 iframe。这个 iframe 在作为网络应用程序运行时过去只能用一根手指滚动,但现在只能用两根手指滚动。 * 在 iOS 网络应用程序中用一根手指和两根手指滚动 iframe 内容完全是另一种蠕虫,而不是我正在寻求帮助的东西 * - 我需要实现方面的帮助我的解决方案。
如果我将内容放在一个 div 中,我可以让它根据需要滚动,但是,我还必须使用一个对象来加载内容(来自单独的页面)——这就是我的 jQuery 问题出现。
当从加载列表中选择一个项目时,它会突出显示 - 一旦用户完成并提交他/她的选择,然后使用 jQuery 删除“突出显示”样式的“突出显示”项目将“取消选择”。
这在 iframe 上运行良好,但我无法更改项目的样式,因为它们包含在 div 和对象中。
这里有一些代码片段来说明发生了什么:
原始(与 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>
我的尝试(无效)
<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 专家,但这看起来应该相当容易......
在此先感谢您提供的任何帮助。
最佳答案
尽管我认为使用 ajax 将内容加载到 div(和单个 DOM)中更好,但我找到了一种在 <object>
中访问文档的方法。元素。
$("#a0", $("#myloader")[0].contentDocument)
将选择 a0
object
内文件中的元素数据。
jquery 选择的第二个参数是要搜索的上下文,$("#myloader)[0]
返回 HTMLObjectElement (相当于 document.getElementById('myloader')
,contentDocument
返回通过 data
属性检索到的 HTML 文档。
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.
}
}
关于javascript - 如何将加载到 <object> 中的元素样式设置为数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26979628/