HarmonyOS鸿蒙Next应用端调用网页js带参数的方法，怎样调用传递参数？

HarmonyOS鸿蒙Next应用端调用网页js带参数的方法，怎样调用传递参数？在使用鸿蒙指南中的“应用侧调用前端页面函数”demo中调用Js 带参数函数时调用不到

点击 runJavaScript 按钮后，index.html中的文字没有变为绿色。

参考以下：

test.ets

// xxx.ets
import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebComponent {
  webviewController: webview.WebviewController = new webview.WebviewController();

  aboutToAppear() {
    // 配置Web开启调试模式
    webview.WebviewController.setWebDebuggingAccess(true);
  }

  build() {
    Column() {
      Button('runJavaScript')
        .onClick(() => {
          // 前端页面函数无参时，将param删除。
          let param = "wwwwwww"
          // this.webviewController.runJavaScript(`htmlTest(${param})`);
          // 假设有一个按钮点击事件或者其他交互，触发runJavaScript()方法
          this.webviewController.runJavaScript('htmlTest()');

          // this.webviewController.runJavaScript('htmlTest(whb)');
          // this.webviewController.runJavaScript('htmlTest()');
        })
      Button('runJavaScript-有参')
        .onClick(() => {
          // 前端页面函数无参时，将param删除。
          let param = "wwwwwww"
          // this.webviewController.runJavaScript(`htmlTest(${param})`);
          // 假设有一个按钮点击事件或者其他交互，触发runJavaScript()方法
          this.webviewController.runJavaScript('htmlTest("param--helloworld")');

          // this.webviewController.runJavaScript('htmlTest(whb)');
          // this.webviewController.runJavaScript('htmlTest()');
        })
      Button('runJavaScriptCodePassed')
        .onClick(() => {
          // 传递runJavaScript侧代码方法。
          this.webviewController.runJavaScript(`function changeColor(){document.getElementById('text').style.color = 'red'}`);
        })
      Web({ src: $rawfile('index.html'), controller: this.webviewController })
    }
  }
}

index.html

<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="callArkTS()">Click Me!</button>
<h1 id="text">这是一个测试信息，默认字体为黑色，调用runJavaScript方法后字体为绿色，调用runJavaScriptCodePassed方法后字体为红色</h1>
<script>
    // 调用有参函数时实现。

    function htmlTest(...params) {
        if(params.length > 0 && params[0].length > 0){
         document.getElementById('text').style.color = 'green';
        }else{
         document.getElementById('text').style.color = 'blue';
        }

        alert(param)
        console.log("whb"+param);
    }
    // 调用无参函数时实现。

    // Click Me！触发前端页面callArkTS()函数执行JavaScript传递的代码。
    function callArkTS() {
        changeColor();
    }
</script>
</body>
</html>

更多关于HarmonyOS鸿蒙Next应用端调用网页js带参数的方法，怎样调用传递参数？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

eggper 2楼•1 个月前

在HarmonyOS鸿蒙Next中，应用端调用网页JavaScript并传递参数可以通过WebView组件实现。首先，确保在布局文件中添加WebView组件，并在代码中初始化。通过WebView的loadUrl方法加载网页时，可以在URL中直接附加参数。例如：

WebView webView = (WebView) findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("https://example.com/page.html?param1=value1&param2=value2");

此外，可以通过WebView的evaluateJavascript方法调用网页中的JavaScript函数并传递参数。例如：

webView.evaluateJavascript("javascript:myFunction('param1', 'param2')", null);

在网页的JavaScript代码中，可以通过window.location.search获取URL中的参数，或者直接调用myFunction函数处理传递的参数。例如：

function myFunction(param1, param2) {
    console.log(param1, param2);
}

这样，应用端即可调用网页JavaScript并传递参数。

gougou168 3楼•1 个月前

在HarmonyOS鸿蒙Next中，您可以通过WebView组件调用网页中的JavaScript方法并传递参数。首先，使用loadUrl方法加载网页，然后通过evaluateJavascript方法执行JavaScript代码并传递参数。例如：

webView.evaluateJavascript("javascript:yourFunction('" + yourParameter + "')", null);

其中，yourFunction是网页中的JavaScript函数，yourParameter是您要传递的参数。确保参数格式正确，并注意处理特殊字符以避免脚本注入问题。