Vaadin 7 中的 JavaScript 在 InternetExplorer 11 上不起作用答案

【问题标题】：JavaScript in Vaadin 7 doesn't work on InternetExplorer 11Vaadin 7 中的 JavaScript 在 InternetExplorer 11 上不起作用
【发布时间】：2016-12-23 10:21:27
【问题描述】：

我在 Vaadin 7 中有一个 Web 应用程序，我使用 JavaScript，它可以在 Google Chrome 上运行，但不能在 IE 11 上运行。这是我使用 JavaScript 的方式（如果它是我不想用 Java可能）

com.vaadin.ui.JavaScript.getCurrent().addFunction("left", new JavaScriptFunction(){
        private static final long serialVersionUID = 1L;
        @Override
        public void call(JsonArray arguments) {

            zinkonaux.executeJs(""
                        + "var box = document.querySelector('.divobjetos');"
                        + "var pos = window.getComputedStyle(box,null).getPropertyValue('left');"
                        + "pos = parseInt(pos);"
                        + "pos = pos + 300;"
                        + "box.style.left = pos+'px';"
                    );

        }
    });

我的问题是：在IE中javascript功能不起作用，我想点击前一个div，另一个滚动，像轮播效果，但是在IE中点击时没有效果并且在开发窗口中没有错误

【问题讨论】：

请定义“不起作用”。此外，请确保 IE 以标准模式运行应用程序。
我在 html 中有两个标签（带有 CustomLayout）<div class="left" onclick="left()"></div><div class="right" onclick="right()"></div> 在谷歌浏览器上，如果我之前点击了一些 div，javascript 函数可以工作，但在 IE 上没有
工作！这意味着什么？在 IE 中，脚本向邻居的窗户扔石头？ “不起作用”不是问题描述。请说明您希望您的代码做什么，以及它的作用。
在IE中javascript功能不起作用，我想点击之前的一个div，另一个滚动，像一个轮播效果，但是在IE中点击时并没有做出效果，在开发中窗口没有错误
现在，这是一个很好的解释，请也将其添加到问题中。顺便提一句。 JS 代码中没有任何内容，在 IE11 中不会“工作”。

标签： javascript java internet-explorer vaadin vaadin7

【解决方案1】：

我建议将您的 Javascript 移到一个单独的文件中。如果您希望 JS 方法在整个应用程序中可用，您可以在 UI 类上使用 @JavaScript 注释。

package com.company

@JavaScript("test.js")
public class MyUI extends UI 
{
...

然后您需要将 test.js 放入文件夹 /com/company/test.js 中的资源文件夹（如果您使用的是 maven），看起来像这样。

function left()
{
    var box = document.querySelector('.divobjetos');"
    var pos = window.getComputedStyle(box,null).getPropertyValue('left');"
    pos = parseInt(pos);"
    pos = pos + 300;"
    box.style.left = pos+'px';
}

【讨论】：

你好，我没有用maven，但是我之前已经导入jquery了，按照你说的做了，但是在IE下还是不行

【解决方案2】：

我无法解决IE中的JavaScript错误，专门改变左右容器之间内部div的位置，在每个容器中使用一个在其ClickListener中修改样式的按钮：

样式样式 = Page.getCurrent().getStyles();
styles.add(".divscroll .divobjects { left: "+positionInfoTags+"px !important }");

我的 html 代码是这样的：

<div class="container">
     <div class="left" location="moveLeft"></div>
     <div class="right" location="moveRight"></div>
     <div class="divscroll">
        <div class="divobjects" location="infoTags">
        </div>
     </div>
</div>

【讨论】：