如何将加载到<object>中的元素样式设置为数据</object>

时间:2014-11-17 18:43:25

标签: javascript jquery object

我最近继承了一些我需要维护的代码,其中一部分是用于在iPad上使用的网络应用程序。

不幸的是,最近的iOS 8更新打破了网络应用程序的一部分。

在一个部分中,web-app包含一个加载在项目列表中的iframe。这个iframe用于在作为web-app运行时只用一根手指滚动,但现在只用两根手指滚动。 *在iOS网络应用中,iframe内容的单指与双指滚动是另外一种蠕虫,而不是我寻求帮助但不是* - 我需要帮助实施我的解决方案。

如果我将内容放在div中,我可以按需要滚动它,但是,我还必须使用一个对象来加载内容(来自单独的页面) - 这就是我的jQuery问题就产生了。

当从加载的列表中选择一个项目时,它会突出显示 - 一旦用户完成并且他/她的选择被提交,则突出显示&#34;&#34;然后取消选择项目&#34;使用jQuery删除&#34;突出显示&#34;风格。

这与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人,但这似乎应该相当容易......

提前感谢您提供的任何帮助。

2 个答案:

答案 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类,其中包含您正在寻找的样式。