能否通过React Native WebView修改远程网页中的amount变量？

不能直接用当前代码实现修改，原因如下：

• 远程网页中的amount变量是定义在$(document).ready()的函数作用域内部的局部变量，并非挂载在window对象上的全局变量。
• 当前React Native代码中modifyFooVariable函数注入的window.amount = '6855555';，只是给window对象新增了一个全局变量amount，和原网页里的局部amount完全是两个独立的变量，无法影响原变量的值。

可行的修改方案 #

方案1：修改远程网页代码（若有权限）

把amount变量改为全局变量，比如：

<script>
// 把变量移到ready函数外部，变成全局变量
let amount = 300;
$(document).ready(function(){
    $("#submitBtn").click(function(){   
        alert(amount)   
        $.post("https://example.com/posted.php",
              {
                price: amount,
                city: "Duckburg"
              },
          function(data, status){
            alert("Data: " + data + "\nStatus: " + status);
          });
    });
});
</script>

或者直接挂载到window对象：

$(document).ready(function(){
    window.amount = 300; // 改为全局挂载
    $("#submitBtn").click(function(){   
        alert(window.amount)   
        $.post("https://example.com/posted.php",
              {
                price: window.amount,
                city: "Duckburg"
              },
          function(data, status){
            alert("Data: " + data + "\nStatus: " + status);
          });
    });
});

此时React Native中的modifyFooVariable函数就能正确修改原变量的值。

方案2：不修改远程网页，注入JS重写事件逻辑

如果无法修改远程网页，可以通过注入JavaScript代码，重写按钮的点击事件，替换其中的amount值：

const modifyFooVariable = () => {
  const jsCode = `
    $(document).ready(function() {
      // 先移除原有的点击事件绑定
      $('#submitBtn').off('click').on('click', function() {
        let amount = 6855555;
        alert(amount);
        $.post("https://example.com/posted.php",
          {
            price: amount,
            city: "Duckburg"
          },
          function(data, status){
            alert("Data: " + data + "\\nStatus: " + status);
          });
      });
    });
  `;
  webViewRef.current.injectJavaScript(jsCode);
};

这样点击按钮时就会使用新的amount值发起请求。

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