xhtml页面中的js脚本已启动但结果不可见

Question

这是一个 JSF 2.3、Primefaces 10 项目。

文件 vivagraph.js 已下载 from here，它包含在项目中，如下所示：

xhtml 页面:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
        <title>VivaGraphJs test page</title>
        <h:outputScript name="js/vivagraph.js" />
        <script type='text/javascript'>
            function onLoad() {
                var g = Viva.Graph.graph();
                g.addLink('space', 'bar');
                console.log("test print");
            }
        </script>
    </h:head>
    <h:body onload="onLoad()">

    </h:body>
</html>

注意：这是改编自basic example on the Vivagraph.js wiki。

页面加载后，它仍然是空白的。 我希望看到一个图表，其中有 2 个节点“space”和“bar”与 link 相连。控制台打印“测试打印”，没有显示错误。

生成的 html 如果这有帮助：

<html xmlns="http://www.w3.org/1999/xhtml">
    <head id="j_idt2">
        <link type="text/css" rel="stylesheet" href="/nocodeapp-web-front/javax.faces.resource/theme.css.html?ln=primefaces-saga&amp;v=10.0.0" /><link type="text/css" rel="stylesheet" href="/nocodeapp-web-front/javax.faces.resource/primeicons/primeicons.css.html?ln=primefaces&amp;v=10.0.0" />
        <title>VivaGraphJs test page</title>
    </head>
    <body onload="onLoad()">
        <script type="text/javascript" src="/nocodeapp-web-front/javax.faces.resource/js/vivagraph.js.html">
        </script>
        <script id="6c6d9708-4b65-4406-a8e0-d8c24b8afb86" type="text/javascript">
        var pf=window.PrimeFaces;if(pf){pf.settings.locale='fr_FR';pf.settings.viewId='/cowo/graph.xhtml';pf.settings.contextPath='/nocodeapp-web-front';pf.settings.cookiesSecure=false;pf.settings.partialSubmit=true;};

            function onLoad() {
                var g = Viva.Graph.graph();
                g.addLink('space', 'bar');
                console.log("test print");
            }
        ;if(window.$){$(PrimeFaces.escapeClientId("6c6d9708-4b65-4406-a8e0-d8c24b8afb86")).remove();}
        </script>
    </body>
</html>

Answer 1

解决办法是在xhtml页面底部添加这个脚本：

<style type="text/css" media="screen">
    html, body, svg { width: 100%; height: 100%;}
</style>

xhtml页面中的js脚本已启动但结果不可见

js script in xhtml page launched but result not visible

javascript

jsf

primefaces

vivagraphjs