将多个 Div 元素的属性从 UIWebView W/Swift 获取到我的 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/
我知道 swift 中的以下代码行。
theWebView.stringByEvaluatingJavaScriptFromString("document.documentElement.outerHTML")
此行将 return 所有 HTML。现在我也许可以通过这个并解析,但我认为这应该是可能的,因为我正在使用 jquery 到 运行 一个命令来获取所有被点击的框。单击每个框时,我将其 'active' 属性更改为 "true" 或 "false"。 我该怎么做?
例如return使用 "tire" 属性值的数组我在每个 div 上有 ( .tire_box) 即被点击 ("active=true").
使用 jQuery(因为我的 HTML 上有)或 Javascript 的答案是可以的。只是不确定要在 stringByEvaluatingJavascriptFromString()
函数
中放入什么
更新::
我能够使用此命令从轮胎的 'one' 中获取值。
document.getElementsByClassName('tire_box')[0].getAttribute('tire')
我需要能够获取所选轮胎的列表并以某种方式在 swift 中对其进行处理。还不确定最好的方法...
有趣的是我似乎能够 运行 jQuery 编码。我在 javascript 之外的变量中创建了一个函数 test() ,在我的 html 和 运行 中有一个 alert('test') 代码...
SwiftJavascript我运行
$(document).ready(function(){
test();
});
添加到 HTML 外 document.ready()
var test = function(){
alert("test function ran");
return "test";
};
在 stringByEvaluatingJavaScriptFromString 函数上它调用了警报,但我似乎没有从 stringByEvaluatingJavaScriptFromString 函数返回任何结果...只是空白?
我想知道 'how' 函数 return 是 javascript 以及我必须在 javascript 命令中做什么才能使其成为 return什么东西?
经过大量研究,我终于找到了答案。结果是 stringByEvaluatingJavaScriptFromString 将 return 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。我这样做是为了 return 一个 JSON 字符串,其中包含我想要从模板中获取的数据。
下一步 Swift 我做了以下代码。
let javascript = "returnToIOS();"
let value = self.theWebView.stringByEvaluatingJavaScriptFromString(javascript)
这将 return 包含所有数据的 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!)
}
Wha La 我将所有数据都放在一个很好的 数组 中,我可以用它来操作!
如何从我的 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")
此行将 return 所有 HTML。现在我也许可以通过这个并解析,但我认为这应该是可能的,因为我正在使用 jquery 到 运行 一个命令来获取所有被点击的框。单击每个框时,我将其 'active' 属性更改为 "true" 或 "false"。 我该怎么做?
例如return使用 "tire" 属性值的数组我在每个 div 上有 ( .tire_box) 即被点击 ("active=true").
使用 jQuery(因为我的 HTML 上有)或 Javascript 的答案是可以的。只是不确定要在 stringByEvaluatingJavascriptFromString()
函数
更新::
我能够使用此命令从轮胎的 'one' 中获取值。
document.getElementsByClassName('tire_box')[0].getAttribute('tire')
我需要能够获取所选轮胎的列表并以某种方式在 swift 中对其进行处理。还不确定最好的方法...
有趣的是我似乎能够 运行 jQuery 编码。我在 javascript 之外的变量中创建了一个函数 test() ,在我的 html 和 运行 中有一个 alert('test') 代码...
SwiftJavascript我运行
$(document).ready(function(){
test();
});
添加到 HTML 外 document.ready()
var test = function(){
alert("test function ran");
return "test";
};
在 stringByEvaluatingJavaScriptFromString 函数上它调用了警报,但我似乎没有从 stringByEvaluatingJavaScriptFromString 函数返回任何结果...只是空白?
我想知道 'how' 函数 return 是 javascript 以及我必须在 javascript 命令中做什么才能使其成为 return什么东西?
经过大量研究,我终于找到了答案。结果是 stringByEvaluatingJavaScriptFromString 将 return 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。我这样做是为了 return 一个 JSON 字符串,其中包含我想要从模板中获取的数据。
下一步 Swift 我做了以下代码。
let javascript = "returnToIOS();"
let value = self.theWebView.stringByEvaluatingJavaScriptFromString(javascript)
这将 return 包含所有数据的 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!)
}
Wha La 我将所有数据都放在一个很好的 数组 中,我可以用它来操作!