从UIWebView的W / Swift中获取多个div元素的属性到我的iOS应用程序中
我如何从我的UIWebView中定义的div元素的属性到我的iOS应用程序？
进一步解释…
我有一个非常简单的HTML文件，我加载到一个UIWebView。 它允许用户点击打开或closuresbutton。 我在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。 现在我可以通过这个也许和parsing，但我想这应该是可能的，因为我使用jquery运行命令来获取所有被点击的框。 当每个框被点击时，我将其“主动”属性更改为“真”或“假”。 我该怎么做呢？
例如，返回一个数组，其中每个div （.tire_box）被单击（ “active = true” ）的轮胎属性的值 。
使用jQuery（因为我在我的HTML）或Javascript的答案是好的。 只是不知道该怎么把stringByEvaluatingJavascriptFromString()函数
更新::
用这个命令我可以从轮胎的“一”中获得价值。
document.getElementsByClassName('tire_box')[0].getAttribute('tire')
我需要能够获得所select的轮胎列表，并以某种方式快速完成。 不确定最好的办法做到这一点，但…
有趣的是我似乎能够运行jQuery代码。 我创build了一个函数testing（）在一个variables之外的JavaScript与警报（'testing'）在它的HTML中，并运行此代码…
我跑了快速Javascript
$(document).ready(function(){ test(); });
在document.ready（）之外添加到HTML
var test = function(){ alert("test function ran"); return "test"; };
在stringByEvaluatingJavaScriptFromString函数，它调用了警报，但我似乎没有从stringByEvaluatingJavaScriptFromString函数得到任何结果…只是空白？
我不知道只是'如何'的函数返回JavaScript和我必须做的JavaScript命令，使其返回的东西？
经过很多研究，我终于找出答案。 原来，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 。 我做到了，所以它会返回一个JSONstring与我想从模板中获得的数据。
接下来在Swift中，我做了下面的代码。
let javascript = "returnToIOS();" let value = self.theWebView.stringByEvaluatingJavaScriptFromString(javascript)
这将返回所有数据的JSONstring！
为了做得更好，我把一个库join了我的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!) }
Wha La把我所有的数据放在一个很好的数组中 ，我可以操纵它！