自定义Javascript组件：使用@StyleSheet在IE8中生成脚本错误

Question

我在vaadin中创建了一个自定义javascript组件。我使用@StyleSheet注释添加了几个外部样式表。该组件工作正常，但在IE8中它显示脚本错误。脚本错误的数量等于使用注释包含的外部CSS的数量。

错误是：对象不支持此操作。

如何解决此问题？

UI类：

package com.example.example;

import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@SuppressWarnings("serial")
@Theme("example")
public class ExampleUI extends UI {

    @WebServlet(value = "/*", asyncSupported = true)
    @VaadinServletConfiguration(productionMode = false, ui = ExampleUI.class)
    public static class Servlet extends VaadinServlet {
    }

    @Override
    protected void init(VaadinRequest request) {
        final VerticalLayout layout = new VerticalLayout();
        layout.setMargin(true);
        setContent(layout);
        MyComp mycomponent = new MyComp();      
        layout.addComponent(mycomponent);
    }

}

---

组件

服务器部分：MyComp.java

package com.example.example;

import com.vaadin.annotations.JavaScript;
import com.vaadin.annotations.StyleSheet;
import com.vaadin.ui.AbstractJavaScriptComponent;


@JavaScript({"component.js","component-connector.js"})
@StyleSheet({"Stylesheet1.css"})
public class MyComp  extends AbstractJavaScriptComponent {

    private static final long serialVersionUID = 1L;

     @Override
     protected MyCompState getState() {
         return (MyCompState) super.getState();
     }
}

客户端部分：component.js

var mylibrary = mylibrary || {};

mylibrary.Comp = function(element) {
    element.innerHTML = "<div>hello</div>";
};

连接器：component-connector.js

window.com_example_example_MyComp =
function() {
    var mycomponent = new mylibrary.Comp(this.getElement());

    this.onStateChange = function(e) {};

};

状态：MyCompState.java

package com.example.example;

import com.vaadin.shared.ui.JavaScriptComponentState;

public class MyCompState extends JavaScriptComponentState{

    private static final long serialVersionUID = 1L;

}

---

样式表

Stylesheet1.css

div {
}

---

Answer 1

您可以尝试更改JavaScript变量名称。

Answer 2

听起来你的css代码被包含为javascript文件。 生成的源可能看起来像 <script src="css_file.css"></script>

什么时候看起来像 <link href="css_file.css" rel="stylesheet" type="text/css" />

你能告诉我们生成的html文件吗？