【问题标题】:how to display wkwebview inside stack view?如何在堆栈视图中显示 wkwebview?
【发布时间】:2019-10-17 21:06:55
【问题描述】:

我刚开始学习 Swift,我正在尝试使用 Interface Builder 构建一个基本的 Web 浏览器。我遇到的问题是,一旦我将 WKWebView 嵌入到堆栈视图中,它就会停止显示任何内容(曾经称为 stackWebView)。如果 webview 在堆栈之外,在 ViewController 内(称为 topWebView),它会按预期工作。这是我到目前为止写的代码。我知道有以编程方式执行此操作的解决方案,但我试图了解 Interface Builder 和代码之间的交互。那么如何在堆叠的 webview 中显示内容呢?

import UIKit
import WebKit

class ViewController: UIViewController, UITextFieldDelegate {

    @IBOutlet weak var urlName: UITextField!
    @IBOutlet weak var stackWebView: WKWebView!
    @IBOutlet weak var topWebView: WKWebView!


    private func loadWebPage(_ s: String){
        topWebView.load(URLRequest(url: URL(string: s)!))
        stackWebView.load(URLRequest(url: URL(string: s)!))
    }

    func textFieldShouldReturn(_ textField: UITextField) -> Bool {
        textField.resignFirstResponder()
        urlName.text = textField.text
        return true
    }

    func textFieldDidEndEditing(_ textField: UITextField) {
        urlName.text = textField.text
        loadWebPage(urlName.text!)
    }


    override func viewDidLoad() {
        super.viewDidLoad()
        urlName.delegate = self
        let startURL = URL(string: "https://www.duckduckgo.com")
        topWebView.load(URLRequest(url: startURL!))
        stackWebView.load(URLRequest(url: startURL!))
    }

}

【问题讨论】:

  • 在界面构建器中添加stackiview,并通过编程方式将子视图排列为stackeview中的Web视图,或使用嵌入选项将它们组合在界面构建器中
  • 我就是这样做的,将 Web 视图和文本字段嵌入到堆栈视图中。就在那时,Web 内容停止显示(对于名为 stackWebView 的非嵌入式 Web 视图,它显示得很好)。

标签: ios swift wkwebview


【解决方案1】:

请找到以下适合我的代码。我能够在堆栈视图中加载 Web 视图,甚至可以通过在文本字段中输入 url 来加载

代码

import UIKit
import WebKit

class ViewController: UIViewController, WKNavigationDelegate, UITextFieldDelegate {

    @IBOutlet weak var urlName: UITextField!
    @IBOutlet weak var stackWebView: WKWebView!
    @IBOutlet weak var topWebView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        urlName.delegate = self
        topWebView.navigationDelegate = self
        stackWebView.navigationDelegate = self
        let startURLString = "https://www.duckduckgo.com"
        loadWebPage(startURLString: startURLString)
    }



    private func loadWebPage(startURLString: String){
        var formattedURLString  =  startURLString
        if !formattedURLString.lowercased().contains("http") {
            formattedURLString = "http://\(formattedURLString)"
        }
        let startURL : URL = URL(string: formattedURLString.addingPercentEncoding(withAllowedCharacters: NSCharacterSet.urlQueryAllowed)!)!
        print(startURL)
        topWebView.load(URLRequest(url: startURL))
        stackWebView.load(URLRequest(url: startURL))
    }

    func textFieldShouldReturn(_ textField: UITextField) -> Bool {
        textField.resignFirstResponder()
        loadWebPage(startURLString: urlName.text!)
        return true
    }



    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        UIApplication.shared.isNetworkActivityIndicatorVisible = false
    }

    func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
        UIApplication.shared.isNetworkActivityIndicatorVisible = true
    }
    func webView(_ webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: Error) {
        print(error.localizedDescription)
    }
}

故事板

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14113" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="BYZ-38-t0r">
    <device id="retina4_7" orientation="portrait">
        <adaptation id="fullscreen"/>
    </device>
    <dependencies>
        <deployment identifier="iOS"/>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14088"/>
        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <scenes>
        <!--View Controller-->
        <scene sceneID="tne-QT-ifu">
            <objects>
                <viewController id="BYZ-38-t0r" customClass="ViewController" customModule="StackViewExample" customModuleProvider="target" sceneMemberID="viewController">
                    <view key="view" contentMode="scaleToFill" id="8bC-Xf-vdC">
                        <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                        <subviews>
                            <textField opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" borderStyle="roundedRect" textAlignment="natural" minimumFontSize="17" translatesAutoresizingMaskIntoConstraints="NO" id="dCG-SE-8O1">
                                <rect key="frame" x="32" y="52" width="311" height="30"/>
                                <constraints>
                                    <constraint firstAttribute="height" constant="30" id="YQA-bf-cZ2"/>
                                </constraints>
                                <nil key="textColor"/>
                                <fontDescription key="fontDescription" type="system" pointSize="14"/>
                                <textInputTraits key="textInputTraits"/>
                                <connections>
                                    <outlet property="delegate" destination="BYZ-38-t0r" id="81P-xI-VQI"/>
                                </connections>
                            </textField>
                            <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" distribution="fillEqually" spacing="10" translatesAutoresizingMaskIntoConstraints="NO" id="naB-Di-vk8">
                                <rect key="frame" x="0.0" y="114" width="375" height="553"/>
                                <subviews>
                                    <wkWebView contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="TzL-qx-9oE">
                                        <rect key="frame" x="0.0" y="0.0" width="375" height="271.5"/>
                                        <color key="backgroundColor" red="0.36078431370000003" green="0.38823529410000002" blue="0.4039215686" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                        <wkWebViewConfiguration key="configuration">
                                            <audiovisualMediaTypes key="mediaTypesRequiringUserActionForPlayback" none="YES"/>
                                            <wkPreferences key="preferences"/>
                                        </wkWebViewConfiguration>
                                    </wkWebView>
                                    <wkWebView contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="8Th-zS-htL">
                                        <rect key="frame" x="0.0" y="281.5" width="375" height="271.5"/>
                                        <color key="backgroundColor" red="0.36078431370000003" green="0.38823529410000002" blue="0.4039215686" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                        <wkWebViewConfiguration key="configuration">
                                            <audiovisualMediaTypes key="mediaTypesRequiringUserActionForPlayback" none="YES"/>
                                            <wkPreferences key="preferences"/>
                                        </wkWebViewConfiguration>
                                    </wkWebView>
                                </subviews>
                            </stackView>
                        </subviews>
                        <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                        <constraints>
                            <constraint firstItem="dCG-SE-8O1" firstAttribute="top" secondItem="6Tk-OE-BBY" secondAttribute="top" constant="32" id="6ud-iU-788"/>
                            <constraint firstItem="6Tk-OE-BBY" firstAttribute="bottom" secondItem="naB-Di-vk8" secondAttribute="bottom" id="I9W-Y2-PPp"/>
                            <constraint firstItem="naB-Di-vk8" firstAttribute="top" secondItem="dCG-SE-8O1" secondAttribute="bottom" constant="32" id="Muf-dU-Xgl"/>
                            <constraint firstItem="naB-Di-vk8" firstAttribute="leading" secondItem="6Tk-OE-BBY" secondAttribute="leading" id="X7T-e4-rEF"/>
                            <constraint firstItem="6Tk-OE-BBY" firstAttribute="trailing" secondItem="naB-Di-vk8" secondAttribute="trailing" id="iod-JL-8w5"/>
                            <constraint firstItem="dCG-SE-8O1" firstAttribute="leading" secondItem="6Tk-OE-BBY" secondAttribute="leading" constant="32" id="oQT-3t-opj"/>
                            <constraint firstItem="6Tk-OE-BBY" firstAttribute="trailing" secondItem="dCG-SE-8O1" secondAttribute="trailing" constant="32" id="qtr-49-LHO"/>
                        </constraints>
                        <viewLayoutGuide key="safeArea" id="6Tk-OE-BBY"/>
                    </view>
                    <connections>
                        <outlet property="stackWebView" destination="8Th-zS-htL" id="Iie-Yi-yyB"/>
                        <outlet property="topWebView" destination="TzL-qx-9oE" id="wLl-yX-yj7"/>
                        <outlet property="urlName" destination="dCG-SE-8O1" id="jhS-ly-gdy"/>
                    </connections>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/>
            </objects>
        </scene>
    </scenes>
</document>

【讨论】:

  • 是的,但是你看,文本字段没有与 webview 一起嵌入到堆栈视图中。一旦你这样做了,你的代码就不再工作了。一定是iOS限制什么的,我会找到另一种方法。谢谢!
【解决方案2】:

你必须对 webView 有四个约束。 Orelse 它的父级应该有四个约束

【讨论】:

    猜你喜欢
    • 2020-03-22
    • 1970-01-01
    • 1970-01-01
    • 2020-04-16
    • 2022-12-09
    • 1970-01-01
    • 2019-11-27
    • 2020-10-21
    • 1970-01-01
    相关资源
    最近更新 更多