带有 Java 和 Vaadin 的 HTML 元素选择器答案

【问题标题】：HTML Element Selector with Java & Vaadin带有 Java 和 Vaadin 的 HTML 元素选择器
【发布时间】：2017-01-17 18:21:12
【问题描述】：

我目前正在构建一个 Vaadin Webapp，用于从网站获取某些 HTML 元素的路径。因此，我想

在 Vaadin 页面的 IFrame / BrowserFrame 中加载网页
让用户直观地点击突出显示的 HTML 元素（以http://selectorgadget.com/ 之类的方式）
生成路径（XPath 似乎是最佳选择）和
将其显示在 Vaadin 页面的公式中（在同一站点上，以检查选择）

我的问题：

真的可以将路径数据从 iFrame 内的网站传输到 Vaadin App 吗？
是否可以使用 Vaadin 应用程序提供的技术来选择 html 元素（这样我就不需要 IFrame 中的任何 Javascript）？
除了 iFrame 之外，还有其他技术可以更好地实现我的目标吗？

提前致谢！

【问题讨论】：

1) 不，2) 是的，但是您必须编写一些 JS 代码来访问/突出显示用户选择。 3）我不这么认为
感谢您的回答。是否有可能做到这一点，例如进口.io？我想，这里有一个完整的 JavaScript 站点，不是吗？

标签： java html iframe vaadin selector

【解决方案1】：

我已经设法得到一个解决方案： iframe 内的 Javascript 和 VaadinUI 之间的完全交互（因为要构建的组件必须集成到现有的 VaadinUI 中）可以通过以下方式实现：

1. 将脚本、css 和其他需要的 Html 内容注入到加载的网页中。解决方案的选择脚本取自here

var elements = {
  top: $('#selector-top'),
  left: $('#selector-left'),
  right: $('#selector-right'),
  bottom: $('#selector-bottom')
};

function registerMouseMove() {
  $(document).mousemove(function(event) {
    if (event.target.id.indexOf('selector') !== -1 || event.target.tagName === 'BODY' || event.target.tagName === 'HTML') return;

    var $target = $(event.target);
    targetOffset = $target[0].getBoundingClientRect(),
      targetHeight = targetOffset.height,
      targetWidth = targetOffset.width;
    //console.log(targetOffset);

    elements.top.css({
      left: (targetOffset.left - 4),
      top: (targetOffset.top - 4),
      width: (targetWidth + 5)
    });
    elements.bottom.css({
      top: (targetOffset.top + targetHeight + 1),
      left: (targetOffset.left - 3),
      width: (targetWidth + 4)
    });
    elements.left.css({
      left: (targetOffset.left - 5),
      top: (targetOffset.top - 4),
      height: (targetHeight + 8)
    });
    elements.right.css({
      left: (targetOffset.left + targetWidth + 1),
      top: (targetOffset.top - 4),
      height: (targetHeight + 8)
    });

  });
};

function unregisterMouseMove() {
  $(document).unbind();
  elements.top.css({
    left: 0,
    top: 0,
    width: 0
  });
  elements.bottom.css({
    top: 0,
    left: 0,
    width: 0
  });
  elements.left.css({
    left: 0,
    top: 0,
    height: 0
  });
  elements.right.css({
    left: 0,
    top: 0,
    height: 0
  });
};

function registerClickListener() {

  $(document).click(function(event) {
    if (event.target.id.indexOf('selector') !== -1 || event.target.tagName === 'BODY' || event.target.tagName === 'HTML')
      return;

    var target = event.target;

    var xpath = Xpath.getElementXPath(target);

    $.ajax({
      type: "POST",
      url: "/rest?text=" + xpath //,
    });

    console.log(xpath);

  });
};

function unregisterClickListener() {
  $(document).off("click");
}

function disableLinks() {
  $('a').click(function(event) {
    event.preventDefault();
  });
}

function enableLinks() {
  $('a').unbind('click');
}

function startSelecting() {
  registerMouseMove();
  registerClickListener();
  disableLinks();
}

function stopSelecting() {
  unregisterClickListener();
  unregisterMouseMove();
  enableLinks();
}

<!-- only for demonstration, delete! for use in programm call startSelecting by a Javascript call from the UI -->
window.onload = function(event) {
  startSelecting();
};

#selector-top,
#selector-bottom {
  background: blue;
  height: 3px;
  position: fixed;
  transition: all 300ms ease;
}
#selector-left,
#selector-right {
  background: blue;
  width: 3px;
  position: fixed;
  transition: all 300ms ease;
}

<div id="selector">
  <div id="selector-top"></div>
  <div id="selector-left"></div>
  <div id="selector-right"></div>
  <div id="selector-bottom"></div>
</div>

<html>

<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js " /></script>
  <script type="text/javascript" src="link/to/xpath.js"></script>
</head>

<body>
  <span><b>Test</b></span>
  <p>trallalalala</p>
</body>

</html>

2. 使用 Vaadins Javascript 调用（参见 here）和一些 Javascript 路径魔法在 iframe 中调用定义的 Javascript： Page.getCurrent().getJavaScript().execute("window.frames[1].frameElement.contentWindow.startSelecting();");

3.在单击项目时使用 Firebugs xpath.js 脚本获取 XPath（注意 license）：

var xpath = Xpath.getElementXPath(event.target);

4. 使用 ajax rest 调用将数据发布到您的 Vaadin 应用程序：

$.ajax({
   type: "POST",
   url: "/rest?text="+xpath
});

5. 创建一个 rest 接口，即使用 Vaadin Broadcaster 将 xpath 值广播到 UI。关于 VaadinUI 如何使用 Broadcaster 和 Push 的详细信息，请参阅 Eric G. 帖子here

@RequestMapping("/rest")
public String sayHello(@RequestParam(value = "text", required = true) String text) {
    Broadcaster.broadcast(text);
}

6. 最后：VaadinUI 接收广播并打印 xpath，例如到 TextField 并进一步处理它

唯一的缺点是，它只能用于单用户应用程序，因为我无法区分同一 UI 的不同实例，即一个休息调用将开始广播到 UI 的所有实例并向它们传输相同的数据。

我希望这对未来的访客有所帮助。 :)

【讨论】：