0

如何从 UIWebView 中定义的 div 元素中获取属性到我的 iOS 应用程序中?

为了进一步解释...

我有一个非常简单的 html 文档,我将它加载到 UIWebView 中。它允许用户单击以打开或关闭按钮。我将 div 上的属性设置为 true 或 false。请参阅下面的代码。

<html>
<head>
    <title>Tire Selection Template</title>
    <style>
        .front_truck_box{
            display:flex;
            flex-wrap: wrap;
            border:1px solid black;
            height:80px;
            flex: 0 1 80px;
            padding:10px;
        }
        .middle_truck_box, .back_truck_box {
            display:flex;
            flex-wrap: wrap;
            border:1px solid black;
            height:80px;
            flex: 1 1 120px;
            max-width:250px;
            padding:10px;
        }
        .wrapper{
            display:flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items:center;
            justify-content: center;
        }
        .tire_box{
            flex: 0 0 10px;
            height:30px;
            width:10px;
            border:1px solid black;
            cursor:pointer;
        }
        .tire_set{
            display: flex;
            flex: 0 0 35px;
            justify-content: space-around;
        }
        .front_tire_set{
            display:flex;
            flex: 0 1 100%;
            justify-content: space-around;
        }
        .first_row,.second_row{
            display:flex;
            flex: 1 0 100%;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-around;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="front_truck_box">
            <div class="first_row">
                <div class="front_tire_set">
                    <div class="tire_box" tire="1" active="false"></div>
                    <div class="tire_box" tire="2" active="false"></div>
                </div>
            </div>
            <div class="second_row">
                <div class="front_tire_set">
                    <div class="tire_box" tire="3" active="false"></div>
                    <div class="tire_box" tire="4" active="false"></div>
                </div>
            </div>
        </div>
        <div class="middle_truck_box">
            <div class="first_row">
                <div class="tire_set">
                    <div class="tire_box" tire="5" active="false"></div>
                    <div class="tire_box" tire="6" active="false"></div>
                </div>
                <div class="tire_set">
                    <div class="tire_box" tire="7" active="false"></div>
                    <div class="tire_box" tire="8" active="false"></div>
                </div>
            </div>
            <div class="second_row">
                <div class="tire_set">
                    <div class="tire_box" tire="9" active="false"></div>
                    <div class="tire_box" tire="10" active="false"></div>
                </div>
                <div class="tire_set">
                    <div class="tire_box" tire="11" active="false"></div>
                    <div class="tire_box" tire="12" active="false"></div>
                </div>
            </div>
        </div>
        <div class="back_truck_box">
            <div class="first_row">
                <div class="tire_set">
                    <div class="tire_box" tire="13" active="false"></div>
                    <div class="tire_box" tire="14" active="false"></div>
                </div>
                <div class="tire_set">
                    <div class="tire_box" tire="15" active="false"></div>
                    <div class="tire_box" tire="16" active="false"></div>
                </div>
            </div>
            <div class="second_row">
                <div class="tire_set">
                    <div class="tire_box" tire="17" active="false"></div>
                    <div class="tire_box" tire="18" active="false"></div>
                </div>
                <div class="tire_set">
                    <div class="tire_box" tire="19" active="false"></div>
                    <div class="tire_box" tire="20" active="false"></div>
                </div>
            </div>
        </div>
    </div>
    <script   src="https://code.jquery.com/jquery-2.2.3.min.js"   integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="   crossorigin="anonymous"></script>
    <script>
        $(document).ready(function(){
            $(".wrapper").on('click', '.tire_box', function() {
                var tire = $(this).attr("tire");
                var active = $(this).attr("active");
                console.log(active);
                //console.log(tire);
                if( active == "false"){
                    $(this).css("background-color","black");
                    $(this).attr("active","true");
                }else{
                    $(this).css("background-color","white");
                    $(this).attr("active","false");
                }
            });

            function test(){
                return "test"
            }
        });
    </script>
</body>
</html>

你可以在这里看到它的作用:https ://jsfiddle.net/x11joex11/0d92ao80/1/

我知道 swift 中的以下代码行。

theWebView.stringByEvaluatingJavaScriptFromString("document.documentElement.outerHTML")

此行将返回所有 HTML。现在我也许可以通过这个并解析,但我认为这应该是可能的,因为我正在使用 jquery 运行命令来获取所有被点击的框。单击每个框时,我将其“活动”属性更改为“真”或“假”。 我该怎么做呢?

例如,返回一个数组,其中包含我在每个被单击的 div (.tire_box)上拥有的 "tire" 属性值 ( "active=true" )。

使用 jQuery(因为我的 HTML 中有它)或 Javascript 的答案是可以的。只是不确定要在stringByEvaluatingJavascriptFromString()函数中添加什么

更新::

使用此命令,我能够从“一个”轮胎中获取值。

document.getElementsByClassName('tire_box')[0].getAttribute('tire')

我需要能够获得选定的轮胎列表并以某种方式迅速对其进行处理。还不确定最好的方法...

有趣的是我似乎能够运行 jQuery 代码。我在 javascript 外部的变量中创建了一个函数 test(),并在我的 html 中添加了一个 alert('test') 并运行了这段代码......

我跑的 Swift Javascript

$(document).ready(function(){
    test();
});

添加到 document.ready() 之外的 HTML

var test = function(){
            alert("test function ran");
            return "test";
        };

在 stringByEvaluatingJavaScriptFromString 函数上,它调用了警报,但我似乎没有从 stringByEvaluatingJavaScriptFromString 函数返回任何结果......只是空白?

我想知道函数“如何”返回 javascript,我必须在 javascript 命令中做什么才能使其返回一些东西?

4

1 回答 1

0

经过大量研究,我终于找到了答案。原来 stringByEvaluatingJavaScriptFromString 将返回要运行的LAST语句的结果。

那就是说我在下面修改了我的html。

<html>
<head>
    <title>Tire Selection Template</title>
    <style>
        .front_truck_box{
            display:flex;
            flex-wrap: wrap;
            border:1px solid black;
            height:80px;
            flex: 0 1 80px;
            padding:10px;
        }
        .middle_truck_box, .back_truck_box {
            display:flex;
            flex-wrap: wrap;
            border:1px solid black;
            height:80px;
            flex: 1 1 120px;
            max-width:250px;
            padding:10px;
        }
        .wrapper{
            display:flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items:center;
            justify-content: center;
        }
        .tire_box{
            flex: 0 0 10px;
            height:30px;
            width:10px;
            border:1px solid black;
            cursor:pointer;
        }
        .tire_set{
            display: flex;
            flex: 0 0 35px;
            justify-content: space-around;
        }
        .front_tire_set{
            display:flex;
            flex: 0 1 100%;
            justify-content: space-around;
        }
        .first_row,.second_row{
            display:flex;
            flex: 1 0 100%;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-around;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="front_truck_box">
            <div class="first_row">
                <div class="front_tire_set">
                    <div class="tire_box" tire="1" active="false"></div>
                    <div class="tire_box" tire="2" active="false"></div>
                </div>
            </div>
            <div class="second_row">
                <div class="front_tire_set">
                    <div class="tire_box" tire="3" active="false"></div>
                    <div class="tire_box" tire="4" active="false"></div>
                </div>
            </div>
        </div>
        <div class="middle_truck_box">
            <div class="first_row">
                <div class="tire_set">
                    <div class="tire_box" tire="5" active="false"></div>
                    <div class="tire_box" tire="6" active="false"></div>
                </div>
                <div class="tire_set">
                    <div class="tire_box" tire="7" active="false"></div>
                    <div class="tire_box" tire="8" active="false"></div>
                </div>
            </div>
            <div class="second_row">
                <div class="tire_set">
                    <div class="tire_box" tire="9" active="false"></div>
                    <div class="tire_box" tire="10" active="false"></div>
                </div>
                <div class="tire_set">
                    <div class="tire_box" tire="11" active="false"></div>
                    <div class="tire_box" tire="12" active="false"></div>
                </div>
            </div>
        </div>
        <div class="back_truck_box">
            <div class="first_row">
                <div class="tire_set">
                    <div class="tire_box" tire="13" active="false"></div>
                    <div class="tire_box" tire="14" active="false"></div>
                </div>
                <div class="tire_set">
                    <div class="tire_box" tire="15" active="false"></div>
                    <div class="tire_box" tire="16" active="false"></div>
                </div>
            </div>
            <div class="second_row">
                <div class="tire_set">
                    <div class="tire_box" tire="17" active="false"></div>
                    <div class="tire_box" tire="18" active="false"></div>
                </div>
                <div class="tire_set">
                    <div class="tire_box" tire="19" active="false"></div>
                    <div class="tire_box" tire="20" active="false"></div>
                </div>
            </div>
        </div>
    </div>
    <script   src="https://code.jquery.com/jquery-2.2.3.min.js"   integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="   crossorigin="anonymous"></script>
    <script>
        var returnToIOS = function(){

            //Calculate which tires are 'active=true' and 'active=false' to the array.
            var tires = [];
            var tireObj = {};

            $(".tire_box").each(function(index){
                tireObj = {};//create new object.
                tireObj["number"] = $(this).attr("tire");
                tireObj["active"] = $(this).attr("active");
                tires.push(tireObj);//add to our tire array the object.
            });

            var jsonString = JSON.stringify(tires);
            return jsonString;
        };
        $(document).ready(function(){
            $(".wrapper").on('click', '.tire_box', function() {
                var tire = $(this).attr("tire");
                var active = $(this).attr("active");

                if( active == "false"){
                    $(this).css("background-color","black");
                    $(this).attr("active","true");
                }else{
                    $(this).css("background-color","white");
                    $(this).attr("active","false");
                }
            });
        });
    </script>
</body>
</html>

注意函数returnToIOS。我这样做是为了让它返回一个 JSON 字符串,其中包含我想要从模板中获取的数据。

接下来在 Swift 中,我做了以下代码。

let javascript = "returnToIOS();"
let value = self.theWebView.stringByEvaluatingJavaScriptFromString(javascript)

这将返回包含所有数据的 JSON 字符串!

为了让它变得更好,我在我的 iOS 项目中包含了一个名为 Swift Json 的库(https://github.com/dankogai/swift-json/

然后我运行了这些命令。

let data = value!.dataUsingEncoding(NSUTF8StringEncoding)

                let json = JSON(data:data!)

                for tires in json.asArray! {
                    print(tires["number"].asString!+" : "+tires["active"].asString!)
                }

哇啦,我把所有的数据都放在了一个很好的数组中,我可以用它来操作!

于 2016-04-25T22:52:42.877 回答