即使在启用 Javascript 后 WKWebView 也无法正常工作 - Swift

Posted 2023-03-14

【中文标题】即使在启用 Javascript 后 WKWebView 也无法正常工作 - Swift

【英文标题】：WKWebView not working even after enabling Javascript - Swift

【发布时间】：2018-12-26 05:53:31

【问题描述】：

我正在尝试使用 WKWebView 显示 webView 及其内容。我使用了下面的代码，webView 显示了它的内容。问题是，当单击 webView 中的按钮/文本字段时，有一个功能可以显示自动填充下拉菜单。启用 javascript 后，它在 android 上运行良好，但即使我按照下面的代码启用 javascript，它对我也不起作用。 （参考：https://***.com/a/47038285/5416775）

private var webView: WKWebView!

   let preferences = WKPreferences()
   preferences.javaScriptEnabled = true
   let configuration = WKWebViewConfiguration()
   configuration.preferences = preferences
   webView = WKWebView(frame: view.bounds, configuration: configuration)

php团队使用下面的代码动态显示下拉菜单的功能。

$('input[name=\'option\']').autocomplete(
 'source': function(request, response) 
   $.ajax(
 url: 'index.php?route=product/product_option/autocomplete&language_id=<?php echo $language_id; ?>&store_id=<?php echo $store_id; ?>&filter_name=' +  encodeURIComponent(request),
 dataType: 'json',     
 success: function(json) 
   response($.map(json, function(item) 
     return 
       category: item['category'],
       label: item['name'],
       value: item['option_id'],
       type: item['type'],
       option_value: item['option_value']
         
       ));
     
   );
 ,
 'select': function(item) 
   html  = '<div class="tab-pane" id="tab-option' + option_row + '">';
    html += ' <input type="hidden" name="product_option[' + option_row + '][product_option_id]" value="" />';
   html += ' <input type="hidden" name="product_option[' + option_row + '][name]" value="' + item['label'] + '" />';
   html += ' <input type="hidden" name="product_option[' + option_row + '][option_id]" value="' + item['value'] + '" />';
   html += ' <input type="hidden" name="product_option[' + option_row + '][type]" value="' + item['type'] + '" />';

   if (item['type'] == 'checkbox') 
   html += ' <div class="form-group">';
   html += '   <label class="col-sm-12 control-label text-danger"><?php echo $entry_text_required; ?></label>';
   html += ' </div>';
   

   html += ' <div class="form-group" style="display: none;">';
   html += '   <label class="col-sm-2 control-label" for="input-required' + option_row + '"><?php echo $entry_required; ?></label>';
   html += '   <div class="col-sm-10"><select name="product_option[' + option_row + '][required]" id="input-required' + option_row + '" class="form-control">';
   html += '       <option value="1"><?php echo $text_yes; ?></option>';
   html += '       <option value="0"><?php echo $text_no; ?></option>';
   html += '   </select></div>';
   html += ' </div>';

   html += ' <div class="form-group" style="display: none;">';
   html += '   <label class="col-sm-2 control-label" for="input-option-sort-order' + option_row + '"><?php echo $entry_option_sort_order; ?></label>';
var option_row = <?php echo $option_row; ?>;

任何解决方案..？将不胜感激。谢谢..！

【问题讨论】：

请分享您的 Html 字符串，其中包含您的下拉菜单

检查您的 php 页面的 javascript。它被注释掉了。即不会在任何地方执行

@SahilManchanda，因为我是编码新手，所以我无法理解你。能详细解释一下吗？

@Saravanan，在桌面上试试你的 url，看看它是否在 select 上显示任何选项

我在 FireFox (iMac) 上试过，但没有显示任何选项。

【参考方案1】：

我已经测试了您的新网址，它运行良好。尝试使用以下代码：

import UIKit
import WebKit
class WebViewController: UIViewController 

    let webView: WKWebView = 
        let v = WKWebView()
        return v
    ()

    lazy var backButton: UIButton = 
        let v = UIButton()
        v.layer.cornerRadius = 5
        v.clipsToBounds = true
        v.backgroundColor = UIColor.black.withAlphaComponent(0.5)
        v.setTitle("<", for: .normal)
        v.setTitleColor(.white, for: .normal)
        return v
    ()

    var url: String?
    var activityIndicator: UIActivityIndicatorView?


    func setupUI()
        view.backgroundColor = .black
        activityIndicator = UIActivityIndicatorView(activityIndicatorStyle: .gray)
        activityIndicator?.center = self.view.center
        [webView,backButton,activityIndicator!].forEachview.addSubview($0)
        webView.fillSuperView()
        if #available(ios 11.0, *) 
            backButton.anchor(top: view.safeAreaLayoutGuide.topAnchor, left: view.leadingAnchor, bottom: nil, right: nil, size: .init(width: 30, height: 30), padding: .init(top: 8, left: 20, bottom: 0, right: 0))
         else 
             backButton.anchor(top: topLayoutGuide.bottomAnchor, left: view.leadingAnchor, bottom: nil, right: nil, size: .init(width: 30, height: 30), padding: .init(top: 8, left: 20, bottom: 0, right: 0))
        
    

    override func viewDidLoad() 
        super.viewDidLoad()
        setupUI()
        backButton.addTarget(self, action: #selector(didSelect(_:)), for: .touchUpInside)

    

    @objc func didSelect(_ sender: UIView)
        switch sender 
        case backButton:
            navigationController?.popViewController(animated: true)
        default:
            break
        
    
    override func viewDidAppear(_ animated: Bool) 
        super.viewDidAppear(animated)
        webView.navigationDelegate = self
        webView.load(URLRequest(url: URL(string: url ?? "https://demo.dukanje.com/index.php?route=product/product_option&product_id=206&store_id=52&language_id=1")!))
        activityIndicator?.startAnimating()
    


extension WebViewController: WKNavigationDelegate
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) 
        self.activityIndicator?.stopAnimating()
        self.activityIndicator?.removeFromSuperview()
        self.activityIndicator = nil
    

我使用扩展来帮助布局：

extension UIView

    func fillSuperView()
        translatesAutoresizingMaskIntoConstraints = false
        guard let superview = superview else return
        anchor(top: superview.topAnchor, left: superview.leadingAnchor, bottom: superview.bottomAnchor, right: superview.trailingAnchor)
    



    func anchor(top: NSLayoutYAxisAnchor?, left: NSLayoutXAxisAnchor?, bottom: NSLayoutYAxisAnchor?, right: NSLayoutXAxisAnchor?, size: CGSize = .zero, padding: UIEdgeInsets = .zero)
        translatesAutoresizingMaskIntoConstraints = false
        if let top = top
            topAnchor.constraint(equalTo: top, constant: padding.top != 0 ? padding.top : 0).isActive = true
        
        if let left = left
            leadingAnchor.constraint(equalTo: left, constant: padding.left != 0 ? padding.left : 0).isActive = true
        
        if let bottom = bottom
            bottomAnchor.constraint(equalTo: bottom, constant: padding.bottom != 0 ? -padding.bottom : 0).isActive = true
        
        if let right = right
            trailingAnchor.constraint(equalTo: right, constant: padding.right != 0 ? -padding.right : 0).isActive = true
        
        if size.width != 0
            widthAnchor.constraint(equalToConstant: size.width).isActive = true
        
        if size.height != 0
            heightAnchor.constraint(equalToConstant: size.height).isActive = true
        
    

第一： 第二：

【讨论】：

它现在工作正常。这是我的 php 团队问题。无论如何感谢您的努力。

【参考方案2】：

1) 允许 NSAppTransportSecurity 进入 Plist 文件。

<key>NSAppTransportSecurity</key><dict><key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

2) 导入 WebKit

3) 创建@IBOutlet weak var webView: WKWebView!

4) 在 ViewDidLoad 中写下这段代码

  let imgUrl = "http://demo.dukanje.com/index.php?route=product/product_option&product_id=206&store_id=cWJaWkdNcTBSVHRtYkkyaDRjK0laQT09..52&language_id=1"
    DispatchQueue.main.async 
        self.webView.loadHTMLString("<html><body><p><select>\(imgUrl)</select></p></body></html>", baseURL: nil)

    

【讨论】：

我已经添加了 NSAppTransportSecurity。并通过加载 html 字符串尝试了您的代码，但它甚至没有显示实际内容本身。