javascript - Java FX 从 Webview 中的网页元素获取响应

Question

我正在 Java FX 中开发一个程序，该程序加载包含 3 个网站的 HTML/CSS/js 文件夹。

网站在 WebView 中显示良好，但我需要在网页内选中复选框时得到响应。 有没有办法询问网络引擎点击了什么或从中获取结果，例如文本字段？

到目前为止，这是我的MainController:

public class MainController implements Initializable  {

    @FXML
    private WebView browser_id;
    WebEngine webEngine;

    @Override
    public void initialize(URL location, ResourceBundle resources) {

        webEngine = browser_id.getEngine();
        String url = MainController.class.getResource("/res/szenario/home.html").toExternalForm();  
        webEngine.load(url);
    }
}

这是我们必须使用的示例网站

  <!-- Unnamed (Shape) -->
  <div id="u0" class="ax_h1">
    <img id="u0_img" class="img " src="resources/images/transparent.gif"/>
    <!-- Unnamed () -->
    <div id="u1" class="text">
      <p><span>Seite 1</span></p>
    </div>
  </div>

  <!-- Unnamed (Image) -->
  <div id="u2" class="ax_image">
    <img id="u2_img" class="img " src="images/home/u2.jpg"/>
    <!-- Unnamed () -->
    <div id="u3" class="text">
      <p><span></span></p>
    </div>
  </div>

  <!-- Unnamed (Shape) -->
  <div id="u4" class="ax_h2">
    <img id="u4_img" class="img " src="resources/images/transparent.gif"/>
    <!-- Unnamed () -->
    <div id="u5" class="text">
      <p><span>Frage 1</span></p>
    </div>
  </div>

  <!-- Unnamed (Checkbox) -->
  <div id="u6" class="ax_checkbox">
    <label for="u6_input">
      <!-- Unnamed () -->
      <div id="u7" class="text">
        <p><span>Antwort 1</span></p>
      </div>
    </label>
    <input id="u6_input" type="checkbox" value="checkbox"/>
  </div>

  <!-- Unnamed (Checkbox) -->
  <div id="u8" class="ax_checkbox">
    <label for="u8_input">
      <!-- Unnamed () -->
      <div id="u9" class="text">
        <p><span>Antwort 2</span></p>
      </div>
    </label>
    <input id="u8_input" type="checkbox" value="checkbox"/>
  </div>

  <!-- Unnamed (Checkbox) -->
  <div id="u10" class="ax_checkbox">
    <label for="u10_input">
      <!-- Unnamed () -->
      <div id="u11" class="text">
        <p><span>Antwort 3</span></p>
      </div>
    </label>
    <input id="u10_input" type="checkbox" value="checkbox"/>
  </div>

  <!-- Unnamed (HTML Button) -->
  <div id="u12" class="ax_html_button">
    <input id="u12_input" type="submit" value="Weiter"/>
  </div>
</div>

以及该网页的 data.js

function() {
var _ = function() { var r={},a=arguments; for(var i=0; i<a.length; i+=2) r[a[i]]=a[i+1]; return r;
var _creator = function() { return _(b,c,d,e,f,g,h,[i],j,_(k,l,m,n,o,p,q,_(),r,_(s,t,u,v,w,_(x,y,z,A),B,null,C,v,D,v,E,F,G,null,H,I,J,K,L,M,N,I),O,_(),P,_(),Q,_(R,[_(S,T,U,V,m,W,X,Y,Z,ba,r,_(bb,_(bc,bd,be,bf),bg,_(bh,bi,bj,bk)),O,_(),R,[_(S,bl,U,V,bm,ba,m,bn,X,bo,Z,ba,r,_(bb,_(bc,bd,be,bf),bg,_(bh,bi,bj,bk)),O,_())],bp,_(bq,br)),_(S,bs,U,V,m,bt,X,bt,Z,ba,r,_(bb,_(bc,bu,be,bv),bg,_(bh,bw,bj,bx)),O,_(),R,[_(S,by,U,V,bm,ba,m,bn,X,bo,Z,ba,r,_(bb,_(bc,bu,be,bv),bg,_(bh,bw,bj,bx)),O,_())],bp,_(bq,bz)),_(S,bA,U,V,m,W,X,bB,Z,ba,r,_(bb,_(bc,bC,be,bD),bg,_(bh,bE,bj,bF)),O,_(),R,[_(S,bG,U,V,bm,ba,m,bn,X,bo,Z,ba,r,_(bb,_(bc,bC,be,bD),bg,_(bh,bE,bj,bF)),O,_())],bp,_(bq,br)),_(S,bH,U,V,m,bI,X,bI,Z,ba,r,_(bb,_(bc,bJ,be,bK),bg,_(bh,bD,bj,bL)),O,_(),R,[_(S,bM,U,V,bm,ba,m,bn,X,bo,Z,ba,r,_(bb,_(bc,bJ,be,bK),bg,_(bh,bD,bj,bL)),O,_())]),_(S,bN,U,V,m,bI,X,bI,Z,ba,r,_(bb,_(bc,bJ,be,bO),bg,_(bh,bD,bj,bL)),O,_(),R,[_(S,bP,U,V,bm,ba,m,bn,X,bo,Z,ba,r,_(bb,_(bc,bJ,be,bO),bg,_(bh,bD,bj,bL)),O,_())]),_(S,bQ,U,V,m,bI,X,bI,Z,ba,r,_(bb,_(bc,bJ,be,bR),bg,_(bh,bD,bj,bL)),O,_(),R,[_(S,bS,U,V,bm,ba,m,bn,X,bo,Z,ba,r,_(bb,_(bc,bJ,be,bR),bg,_(bh,bD,bj,bL)),O,_())]),_(S,bT,U,V,m,bU,X,bU,Z,ba,r,_(bb,_(bc,bd,be,bV),bg,_(bh,bD,bj,bW)),O,_(),P,_(bX,_(bY,bZ,ca,[_(bY,cb,cc,g,cd,[_(ce,cf,bY,cg,ch,_(ci,j,b,cj,ck,ba),cl,cm)])])),cn,ba)])),co,_(),cp,_(cq,_(cr,cs),ct,_(cr,cu),cv,_(cr,cw),cx,_(cr,cy),cz,_(cr,cA),cB,_(cr,cC),cD,_(cr,cE),cF,_(cr,cG),cH,_(cr,cI),cJ,_(cr,cK),cL,_(cr,cM),cN,_(cr,cO),cP,_(cr,cQ)));}; `var b="url",c="page_1.html",d="generationDate",e=new Date(1453388201590.63),f="isCanvasEnabled",g=false,h="variables",i="OnLoadVariable",j="page",k="packageId",l="079be0996f394d7483f8de5bb39048a0",m="type",n="Axure:Page",o="name",p="Page 1",q="notes",r="style",s="baseStyle",t="627587b6038d43cca051c114ac41ad32",u="pageAlignment",v="near",w="fill",x="fillType",y="solid",z="color",A=0xFFFFFFFF,B="image",C="imageHorizontalAlignment",D="imageVerticalAlignment",E="imageRepeat",F="auto",G="favicon",H="sketchFactor",I="0",J="colorStyle",K="appliedColor",L="fontName",M="Applied Font",N="borderWidth",O="adaptiveStyles",P="interactionMap",Q="diagram",R="objects",S="id",T="fa0329e330ba41e0b485edd1cd43e111",U="label",V="",W="buttonShape",X="styleType",Y="h1",Z="visible",ba=true,bb="location",bc="x",bd=350,be="y",bf=23,bg="size",bh="width",bi=106,bj="height",bk=37,bl="fd05b4d5e98f47b9aebdc363c20d924b",bm="isContained",bn="richTextPanel",bo="paragraph",bp="images",bq="normal~",br="resources/images/transparent.gif",bs="12e0bcd399c144b38c16c0f96e9c53a5",bt="imageBox",bu=630,bv=13,bw=184,bx=57,by="00ec404f1731420797211da1c8420243",bz="images/home/u2.jpg",bA="da3f04277d724fbfa0a11b81639211cf",bB="h2",bC=50,bD=100,bE=86,bF=28,bG="6ad71967344845668ff4d461d84e9076",bH="44961d49e6cb4e46bb27707528b7d7f0",bI="checkbox",bJ=170,bK=164,bL=16,bM="fb7a03101ae64189af4a3fb6353aaec8",bN="3c39f1bbccf24a78a53b32135f6d950d",bO=200,bP="07b2e00808e04f39af0ad3b1548c2325",bQ="b18efdb0477941e3b9b29784e7a11eec",bR=234,bS="3ce89142b20946d7948e1b3f98fae1f6",bT="722fcce6a8b94f1ea5748dcb80b86e5f",bU="button",bV=310,bW=25,bX="onClick",bY="description",bZ="OnClick",ca="cases",cb="Case 1",cc="isNewIfGroup",cd="actions",ce="action",cf="linkWindow",cg="Open Page 2 in Current Window",ch="target",ci="targetType",cj="page_2.html",ck="includeVariables",cl="linkType",cm="current",cn="tabbable",co="masters",cp="objectPaths",cq="fa0329e330ba41e0b485edd1cd43e111",cr="scriptId",cs="u0",ct="fd05b4d5e98f47b9aebdc363c20d924b",cu="u1",cv="12e0bcd399c144b38c16c0f96e9c53a5",cw="u2",cx="00ec404f1731420797211da1c8420243",cy="u3",cz="da3f04277d724fbfa0a11b81639211cf",cA="u4",cB="6ad71967344845668ff4d461d84e9076",cC="u5",cD="44961d49e6cb4e46bb27707528b7d7f0",cE="u6",cF="fb7a03101ae64189af4a3fb6353aaec8",cG="u7",cH="3c39f1bbccf24a78a53b32135f6d950d",cI="u8",cJ="07b2e00808e04f39af0ad3b1548c2325",cK="u9",cL="b18efdb0477941e3b9b29784e7a11eec",cM="u10",cN="3ce89142b20946d7948e1b3f98fae1f6",cO="u11",cP="722fcce6a8b94f1ea5748dcb80b86e5f",cQ="u12";
return _creator();
})());

Answer 1

您可以通过创建从 Java 应用程序到网页的桥梁来实现这一点。这将允许您从页面中嵌入的 JavaScript 调用 Java 方法。每次加载页面时都必须进行注册。

假设您有一个类来处理来自 JavaScript 的调用:

public class JavaScriptCallback {
  public void clickedCheckbox(String id) {
    ...
  }
}

然后您可以将此类的实例注册为脚本:

@Override
public void initialize(URL location, ResourceBundle resources) {

    webEngine = browser_id.getEngine();
    String url = MainController.class.getResource("/res/szenario/home.html").toExternalForm();
    webEngine.getLoadWorker().stateProperty()
        .addListener((obs, oldValue, newValue) -> {
          if (newValue == Worker.State.SUCCEEDED) {
            JSObject jsobj = (JSObject)webEngine.executeScript("window");
            jsobj.setMember("jsCallback", new JavaScriptCallback());
          }
        });

    webEngine.load(url);
}

假设您的网页中有 jQuery，您可以执行以下操作:

$(':checkbox').change(function() {
        jsCallback.clickedCheckbox($(this).attr('id'));
});

存在相当多的陷阱，因此出于开发目的，integrate firebug 似乎是个好主意。点亮并注销到控制台，以便您可以更轻松地调试正在发生的情况。

进一步阅读

• Oracle article on JavaFX JavaScript bridge
• Java2s collection of WebView examples
• JAVAFX / WebView / WebEngine FireBugLite or Some other debugger?