Блог

Главная - Вопросы по программированию - скрипт js на странице xhtml запущен, но результат не виден

скрипт js на странице xhtml запущен, но результат не виден

#javascript #jsf #primefaces #vivagraphjs

Вопрос:

Это проект JSF 2.3, Primefaces 10.

Файл vivagraph.js скачивается отсюда, он включен в проект вот так:

снимок экрана организации файлов

Страница 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>

Примечание: это адаптировано из базового примера на Vivagraph.js вики.

Когда страница загружается, она остается пустой. Я ожидал бы увидеть график с 2 узлами «пробел» и «полоса», соединенными ссылкой. Консоль выводит «тестовую печать», не показывает ошибок.

Сгенерированный 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-sagaamp;amp;v=10.0.0" /><link type="text/css" rel="stylesheet" href="/nocodeapp-web-front/javax.faces.resource/primeicons/primeicons.css.html?ln=primefacesamp;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>

Комментарии:

1. Я согласен, что я даже добавил » var renderer = Viva.Graph.View.renderer(g); renderer.run ();», который был в документах, и я не получаю ошибок, но не визуализирую график.

Ответ №1:

Решение состоит в том, чтобы добавить этот скрипт в нижней части страницы xhtml:

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