2016-04-25 2 views
0

Как получить атрибут из элемента div, определенного в моем UIWebView, в мое приложение iOS?Получить атрибут из нескольких элементов Div в мое приложение iOS из UIWebView W/Swift

Чтобы объяснить далее ...

У меня есть очень простой HTML документ, который я загружаю в UIWebView. Он позволяет пользователю щелкнуть, чтобы включить или выключить кнопки. Я устанавливаю атрибут divs в 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 для запуска команды, чтобы получить все ящики, которые были нажаты. При каждом щелчке по ящику я изменяю свой «активный» атрибут на «true» или «false». Как это сделать?

Например возвращая массив значений «шина» атрибут У меня есть на каждом сОн (.tire_box), что нажата («активная = истина»).

Ответ с использованием jQuery (так как у меня есть это на моем HTML) или Javascript в порядке. Просто не уверен, что положить в функции stringByEvaluatingJavascriptFromString()

Update ::

Я был в состоянии получить значение от «одного» шин с этой командой.

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

Мне нужно уметь получить список выбранных шин и как-то сделать что-то с ним. Не уверен, лучший способ сделать это еще ...

Интересно, что я, похоже, могу запустить код jQuery. Я создал тест функции() в переменной вне JavaScript с предупреждением («тест») в нем в моем HTML и побежал этот код ...

Swift Javascript Я побежал

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

в дополнение к HTML вне document.ready()

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

на функцию stringByEvaluatingJavaScriptFromString и назвал предупреждение, но я, кажется, не получить никакого результата назад от stringByEvaluatin Функция gJavaScriptFromString ... просто пустая?

Мне просто интересно, как функция возвращает javascript и что мне нужно сделать в команде javascript, чтобы вернуть что-то?

ответ

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 с данными, которые я хотел получить от шаблона.

Следующий в Свифт Я сделал следующий код.

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!) 
       } 

и Wha La я имел все мои данные в хорошем массива что я могу манипулировать с!