從UIWebView W / Swift將多個Div元素的屬性獲取到我的iOS應用中
[英]Get Attribute From Multiple Div Elements into my iOS app from UIWebView W/Swift
問題描述
如何從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/
我知道下面的代碼行很快。
theWebView.stringByEvaluatingJavaScriptFromString("document.documentElement.outerHTML")
該行將返回所有HTML。 現在我也許可以分析一下，但是我想應該有可能，因為我正在使用jquery運行命令來獲取所有被單擊的框。 單擊每個框后，我將其“活動”屬性更改為“真”或“假”。 我該怎么做呢？
例如，返回一個在單擊的每個div （.tire_box）上具有“輪胎”屬性值的數組 （ “ 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命令中做什么才能使其返回某些信息？
1 個解決方案
解決方案1
0 已采納 2016-04-25 22:52:42
經過大量研究，我終於找到了答案。 事實證明，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!)
}
和Wah La，我所有的數據都放在一個可以處理的漂亮數組中！
是否會使用UIWebview中的JSContext來重新調整我的應用程序？
[英]Will using the JSContext from a UIWebview get my app rejcted?
如何從UIWebView傳遞數據到Objective-C IOS中的本機應用程序
[英]How to get data from UIWebView pass to Native app in Objective-c IOS
如何從div的ID開始獲取所有具有內聯樣式（style-attribute）的元素？
[英]How to get all elements with inline-style (style-attribute) start from a id of a div?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.