javascript - 从 UIWebView W/Swift 将多个 Div 元素的属性获取到我的 iOS 应用程序中-6ren

javascript - 从 UIWebView W/Swift 将多个 Div 元素的属性获取到我的 iOS 应用程序中

转载作者：行者123 更新时间：2023-11-30 13:28:39

如何从 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")

该行将返回所有 HTML。现在我也许可以完成这个并解析，但我认为这应该是可能的，因为我正在使用 jquery 运行命令来获取所有被单击的框。单击每个框时，我将其“事件”属性更改为“true”或“false”。 我该怎么做？

例如，在单击的每个 div (.tire_box) 上返回一个包含“tire”属性值的数组(“active=true “)。

使用 jQuery(因为我的 HTML 上有它)或 Javascript 的答案是可以的。只是不确定要在 stringByEvaluatingJavascriptFromString() 函数中放入什么

更新::

我能够使用此命令从“一个”轮胎获取值。

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

我需要能够获得所选轮胎的列表，并以某种方式快速地用它做一些事情。还不确定执行此操作的最佳方法...

有趣的是我似乎能够运行 jQuery 代码。我在 javascript 外部的变量中创建了一个函数 test() ，并在我的 html 中创建了一个警报('test')，并运行了此代码...

我运行的 Swift 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。我这样做是为了让它返回一个 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!)
                }

Wha La 我将所有数据都放在一个漂亮的数组中，我可以用它进行操作!

关于javascript - 从 UIWebView W/Swift 将多个 Div 元素的属性获取到我的 iOS 应用程序中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36840196/

文章推荐： ios - 隐藏 View 并相应地重新定位其他 View

文章推荐： javascript - jquery的图像预加载问题

uiwebview - UIWebView 中文本选择开始或结束的通知？
我正在寻找一种方法来观察 UIWebView 中文本选择已开始或结束的通知。一旦出现大头针和蓝色选择覆盖，它会自动更新 Javascript 选择和范围对象，但是当您点击选择并结束时，似乎没有一种干净
uiwebview - 如何确定用户是否点击了 UIWebView
我需要获取 UIWebView 的 url在用户单击一次后显示。我尝试在 UIWebView 下放置一个按钮，该按钮调用确定 url 的方法。，但这样按钮不起作用。我试过在 UIWebView 上
uiwebview - AFNetworking 证书固定 UIWebView
我正在使用 AFNetworking UIWebView 类别，我想知道是否有任何方法可以通过证书固定检查加载 url。最好的问候，最佳答案 UIWebView 没有向它公开任何直接 API，但它
uiwebview - 如何在 UIWebView 中禁用长触摸？
我想从应用程序中禁用长触摸。我无法控制在 WebView 上加载的 HTML。最佳答案在 webViewDidFinishLoad委托(delegate)我在加载的 html 页面上运行一个禁用长
uiwebview - 如何检测 UIWebView 是否正在缩放？
每个人: 我可以通过将scalesPageToFit 设置为YES 来启用缩放。但是，我如何知道 UIWebView 是否正在缩放？有人知道吗？提前致谢。最佳答案已解决。向 XXXViewC
uiwebview - 在加载之前找到 UIWebview 的内容高度
我在每个单元格中都有几个自定义单元格和 WebView 。现在，我的要求是找到要在 webview 上加载的 HTML 字符串的高度，然后根据此更改自定义单元格高度和 webview 高度。我知道可
uiwebview - 为 UIWebView 请求设置 Cookie
我想嵌入一个 UIWebView进入我的 MonoTouch 应用程序，用于尚未本地实现的区域。为了对网站进行身份验证，我想设置一个包含当前 session key 的 cookie。我尝试创建一
uiwebview - iOS 7 UIWebView 不加载网页
我的应用程序使用 UIWebview，它在 iOS 5 和 iOS 6 中运行良好。但是，当我在 Xcode 5 中构建并运行相同的代码时，它不会在 iOS 7 中加载网页。 - (void)web
iPhone UIWebView - 从超链接打开新的 UIWebView Controller
我有一个嵌入式网站，有很多链接，但 WebView 窗口相当小，允许放大和缩小列表上方的较大图像。如果可能的话，我需要 webview 响应到带有第二个嵌入式 UIWebView 的新 Control
uiwebview - monotouch uiwebview 找不到本地 html
我正在 Monotouch 上构建 iPhone 应用程序。我的项目的一部分使用本地网站内容。我将网站使用的所有 html、js、css 和图像复制到一个文件夹中，并将其导入到我的 monotouch
uiwebview - Swift UIWebView 可选值为 nil
在下面的示例中，infoScroller 是一个UIWebView，println(HTMLDescription) 打印一个可爱的 HTML 字符串。但是，尝试 loadHTMLString 会出现
iOS:加载另一个 UIWebView 后无法调试 UIWebView
我有一个包含多个 UIWebView 的应用程序。我有一个 UIWebView 保存所有业务逻辑和其他 UIWebViews 用于显示目的。但是，我发现如果 UIWebView 不是最后一个加载的，断
html - 如何从另一个 UIWebView 打开 UIWebView？
我的一个包含链接的 View Controller 底部有一个 Web View 。我想要做的是，当用户单击 Web View 中的一个链接时，它会打开一个 Web View ，该 View 占据屏幕
uiwebview - 为什么缩放 UIWebview 在 iOS5 中不起作用？
我已经在 webview 中实现了 ScrollView 的委托(delegate)。由于，iOS 5 默认 ScrollView 不再响应 didZoom 事件。为什么会出现这种行为？最佳答案 i
uiwebview - 使用 Xcode UI 测试测试 UIWebView
我正在使用新的 Xcode UI Testing来自 XCTest Framework与 Xcode 7 GM .我有一个带有简单 UIWebView 的应用程序(它只是一个带有 web View 和
uiwebview - Swift 从 UIWebView 响应中获取 header
我无法从 UIWebView 响应中获取 header ，因为响应显然没有被缓存。有解决方法吗？我试过来自 here 的代码. 我的应用程序使用混合的原生 iOS View Controller 和
iphone - 如何打开从 UIWebView 到新 UIWebView 的任何链接？
我想制作一个简单的应用程序，其中具有自定义内容的 UIWebView 将具有多个指向具有类似内容的其他页面的链接(顶部有一个导航栏，只有一个后退按钮)。我阅读了this的答案问题，但是我不确定是否应该
iphone - 当 UIWebView 的宽度小于窗口宽度时，UIWebView 中的网页无法正确自动调整大小
我制作了一个简单的测试项目，其中仅包含一个 UIWebView，其中 UIView 填充了窗口。当 UIWebView 的宽度与 UIView 相同时，一切正常。当UIWebView的宽度小于容器的宽
uiwebview - uiwebview 中的 uimenucontroller 带有自定义菜单项，没有更多菜单
在我的 iPad 应用程序中，有一个显示文本内容的 UIWebview。当我按住并选择一个文本时，应该会弹出一个带有 2 个自定义菜单的菜单。说，|菜单 1 |菜单2 | 但似乎 COPY 菜单也会
uiwebview - 如何在 uiwebview 中打开 itunes 链接
是否可以在 uiwebview.js 中加载应用商店链接。我尝试在 uiwebview 中打开它，但它没有加载到那里。我不希望用户在单击我的应用程序中的网址时离开我的应用程序。可能吗？问候潘卡杰

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 从 UIWebView W/Swift 将多个 Div 元素的属性获取到我的 iOS 应用程序中