iOS Swift中调用JavaScript函数及获取带输入值的WebView HTML问题

嘿，我明白你遇到的麻烦了——用document.documentElement.outerHTML拿不到用户输入的内容，还有带参数的JS函数不知道怎么在Swift里调用，对吧？我来一步步帮你解决。

为啥直接拿outerHTML拿不到输入内容？ #

其实原因很简单：用户在表单里输入的内容是存在DOM元素的动态value属性里的，但outerHTML返回的是页面加载时的静态HTML代码，不会自动把用户输入的动态值同步进去。所以要么先把这些动态值手动同步到元素的HTML属性里，要么就用你那个现成的能返回完整HTML的JS函数。

怎么在Swift里调用带参数的JS函数？ #

假设你的JS函数长这样（比如需要传一个选择器参数来指定要同步的元素）：

function getFullHTML(targetElements) {
  // 先同步输入值到HTML属性
  const elements = document.querySelectorAll(targetElements);
  elements.forEach(el => {
    if (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA') {
      el.setAttribute('value', el.value);
    }
  });
  // 返回完整的HTML
  return document.documentElement.outerHTML;
}

在Swift里调用这个带参函数超简单，只要把函数调用的完整语句写成字符串传给stringByEvaluatingJavaScript(from:)就行。比如你要传参数"input, textarea"，代码可以这么写：

// 构造JS调用字符串，注意Swift里双引号要转义哦
let jsInvokeString = "getFullHTML(\"input, textarea\")"
if let completeHTML = webView.stringByEvaluatingJavaScript(from: jsInvokeString) {
    print(completeHTML)
    // 这下就能拿到包含用户输入的完整HTML啦
}

小提醒： #

• 如果你的参数是Swift里的动态变量，一定要注意转义特殊字符，不然容易出JS语法错误。比如参数里有双引号的话，可以用单引号包裹，或者用addingPercentEncoding处理：

  let myParam = "user-input\"example"
  guard let escapedParam = myParam.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) else {
      return
  }
  // 用decodeURIComponent还原参数
  let jsInvokeString = "getFullHTML(decodeURIComponent(\"\(escapedParam)\"))"
  

• 一定要确保WebView已经加载完成，而且那个JS函数已经在页面里了——最好在webViewDidFinishLoad代理方法里调用，避免函数不存在的问题。

额外方案：不用现成JS函数，手动同步输入值 #

要是你不想用那个现成的JS函数，也可以先执行一段同步输入值的JS代码，再拿HTML：

// 先同步所有输入框、文本域、下拉框的动态值到HTML属性
let syncInputScript = """
  const allInputs = document.querySelectorAll('input, textarea, select');
  allInputs.forEach(el => {
    switch(el.tagName) {
      case 'INPUT':
      case 'TEXTAREA':
        el.setAttribute('value', el.value);
        break;
      case 'SELECT':
        const selectedOpt = el.querySelector('option:checked');
        if (selectedOpt) selectedOpt.setAttribute('selected', 'selected');
        break;
    }
  });
"""
// 先执行同步脚本
webView.stringByEvaluatingJavaScript(from: syncInputScript)

// 再获取完整HTML
if let fullHTML = webView.stringByEvaluatingJavaScript(from: "document.documentElement.outerHTML") {
    print(fullHTML)
}

内容的提问来源于stack exchange，提问作者Faizul Karim