从UIWebView W / Swift将多个Div元素的属性获取到我的iOS应用中
[英]Get Attribute From Multiple Div Elements into my iOS app from UIWebView W/Swift
问题描述
How do I get an attribute from a div element defined in my UIWebView into my iOS app? 
如何从UIWebView中定义的div元素获取属性到iOS应用程序？
To explain further... 为了进一步解释...
I have a very simple html document that I load into a UIWebView. 我有一个非常简单的HTML文档，我将其加载到UIWebView中。 It allows a user to click to turn buttons on or off. 它允许用户单击以打开或关闭按钮。 I set an attribute on the divs to true or false. 我将div上的属性设置为true或false。 Refer to my code below. 请参阅下面的代码。
<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>
You can see it in action here: https://jsfiddle.net/x11joex11/0d92ao80/1/ 您可以在这里查看其运行情况： https : //jsfiddle.net/x11joex11/0d92ao80/1/
I'm aware of the the following line of code in swift. 我知道下面的代码行很快。
theWebView.stringByEvaluatingJavaScriptFromString("document.documentElement.outerHTML")
This line will return ALL the HTML. 该行将返回所有HTML。 Now I could go through this perhaps and parse, but I'm thinking it should be possible since I'm using jquery to run a command to get all the boxes that were clicked. 现在我也许可以分析一下，但是我想应该有可能，因为我正在使用jquery运行命令来获取所有被单击的框。 When each box is clicked I change its 'active' attribute to "true" or "false". 单击每个框后，我将其“活动”属性更改为“真”或“假”。 How do I do this? 我该怎么做呢？
For example returning an array with values of the "tire" attribute I have on each div (.tire_box) that is clicked ( "active=true" ). 例如，返回一个在单击的每个div （.tire_box）上具有“轮胎”属性值的数组 （ “ active = true” ）。
An answer using jQuery (since I have it on my HTML) or Javascript is ok. 使用jQuery（因为我的HTML上有它）或Javascript的答案是可以的。 Just not sure what to put in the stringByEvaluatingJavascriptFromString() function 只是不确定要在stringByEvaluatingJavascriptFromString()函数中放入什么
Update:: 更新：：
I was able to get the value from 'one' of the tires with this command. 使用此命令，我能够从一个轮胎中获得价值。
document.getElementsByClassName('tire_box')[0].getAttribute('tire')
I need to be able to get the list of tires selected and do something with it in swift somehow. 我需要能够选择轮胎列表，并以某种方式快速地对其进行处理。 Not sure best way to do this yet... 尚不确定执行此操作的最佳方法...
Whats interesting is I seem to be able to run jQuery code. 有趣的是，我似乎能够运行jQuery代码。 I created a function test() in a variable outside javascript with an alert('test') in it in my html and ran this code... 我在javascript外部的变量中创建了函数test（），并在html中添加了alert（'test'）并运行了此代码...
Swift Javascript I ran 我运行的Swift Javascript
$(document).ready(function(){
test();
});
Added to HTML outside document.ready() 在document.ready（）外部添加到HTML
var test = function(){
alert("test function ran");
return "test";
};
on the stringByEvaluatingJavaScriptFromString function and it called the alert but I don't seem to get any result back from the stringByEvaluatingJavaScriptFromString function...just blank? 在stringByEvaluatingJavaScriptFromString函数上，它调用了警报，但是我似乎没有从stringByEvaluatingJavaScriptFromString函数得到任何结果...只是空白？
I wonder just 'how' the function returns the javascript and what do I have to do in the javascript command to make it return something? 我想知道函数“如何”返回javascript，我必须在javascript命令中做什么才能使其返回某些信息？
1 个解决方案
解决方案1
0 已采纳 2016-04-25 22:52:42
After much research I finally figured out the answer. 经过大量研究，我终于找到了答案。 Turns out that stringByEvaluatingJavaScriptFromString will return the result of the LAST statement to be run. 事实证明，stringByEvaluatingJavaScriptFromString将返回要运行的LAST语句的结果。
That said I modified my html the following below. 也就是说，我在下面修改了我的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>
Notice the function returnToIOS . 注意函数returnToIOS 。 I made it so it would return a JSON string with the data I wanted from the template. 我做到了，所以它将返回一个JSON字符串，其中包含我想要的模板数据。
Next in Swift I did the following code. 接下来在Swift中，我执行了以下代码。
let javascript = "returnToIOS();"
let value = self.theWebView.stringByEvaluatingJavaScriptFromString(javascript)
This will return the JSON string with all the data! 这将返回带有所有数据的JSON字符串！
To make this even better, I included a library into my iOS project called Swift Json ( https://github.com/dankogai/swift-json/ ) 为了使它变得更好，我在我的iOS项目中包括了一个名为Swift Json（ https://github.com/dankogai/swift-json/ ）的库。
I then ran these commands. 然后，我运行这些命令。
let data = value!.dataUsingEncoding(NSUTF8StringEncoding)
let json = JSON(data:data!)
for tires in json.asArray! {
print(tires["number"].asString!+" : "+tires["active"].asString!)
}
and Wha La I had all my data in a nice array that I can manipulate with! 和Wah La，我所有的数据都放在一个可以处理的漂亮数组中！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.