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

标签 javascript jquery object

我最近继承了一些需要维护的代码,其中一部分是打算在 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/

相关文章:

javascript - JQuery UI 响应式(Reactive) slider (在 slider 更改时同时更新多个 slider )

javascript - 如何将对象拆分为嵌套对象? (递归方式)

javascript - 谷歌地图自动完成总是选择第一项

JavaScript,为什么我收到错误 "array is not defined in the function add"

python - 在Python中使用导入类的对象作为另一个类的全局变量

javascript - 通过单击标签来切换下拉菜单

javascript - Redis GET 函数返回未定义

jquery - 在 jQuery AJAX GET 调用中传递请求 header

javascript - 如何获取调用javascript函数的html链接的父div的类名?

python - 带有内连接查询的 web.py 数据库