javascript - xhtml页面中的js脚本已启动但结果不可见
问题描述
这是一个 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 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&v=10.0.0" /><link type="text/css" rel="stylesheet" href="/nocodeapp-web-front/javax.faces.resource/primeicons/primeicons.css.html?ln=primefaces&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>
解决方案
解决方案是在 xhtml 页面底部添加此脚本:
<style type="text/css" media="screen">
html, body, svg { width: 100%; height: 100%;}
</style>
推荐阅读
- swagger-codegen - swagger codegen 需要注释
- c# - 在 Roslyn 诊断分析器中检测隐式强制转换
- three.js - 片段着色器中的“基于面”与“基于顶点”的属性
- c# - Aspose.Word MailMerge FieldMergingCallback 设置字体大小
- c# - C# 中的 twitter 集成
- xamarin - 在 ScrollView 内时,图像不会适应/填充
- java - ProtobufAnnotationSerializer 的问题 - 斯坦福 CoreNLP
- java - Eclipse Oxygen - 按字母顺序排列的 getter 和 setter?
- elasticsearch - 不使用内置标记过滤器的自定义标记器
- java - 如何从编辑文本中获取元素的索引