从复合组件执行JavaScript
作者:互联网
美好的一天,我有一个困扰我几个小时的问题.非常简单.呈现复合组件时,我尝试调用/执行JavaScript.就像您可以使用html标签正文和onload一样.
如何引用要执行的嵌入式JavaScript?
<cc:implementation>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" />
<div id="#{cc.clientId}" >
<div id="map_canvas" style="width: 850px; height: 350px; padding: 1px; border: darkblue" />
<script>init();</script>
<script type="text/javascript">
var map = null;
function init() {
var latlng = new google.maps.LatLng(51.5001524, -0.12623619);
var myOptions = {
zoom: 7,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</div>
</cc:implementation>
我已经尝试过this.init(),#{cc.clientId} .init().但是在上下文中找不到JS.如果我从JSF / ajax组件执行它,则只需使用“ init();”就可以正常工作.
解决方法:
在定义函数之前,您正在调用init().
将调用放在函数定义之后.
<script type="text/javascript">
var map = null;
function init() {
var latlng = new google.maps.LatLng(51.5001524, -0.12623619);
var myOptions = {
zoom: 7,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
<script>init();</script>
或者只是摆脱函数调用,而直接执行它.它只是在< div id =“ map_canvas”>之后执行后才起作用.已经确定.
<script type="text/javascript">
var map = null;
var latlng = new google.maps.LatLng(51.5001524, -0.12623619);
var myOptions = {
zoom: 7,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
</script>
与具体问题无关:您的复合组件存在另一个设计缺陷.在同一视图中,不能多次重复使用此组件.您最终会得到多个< div id =“ map_canvas”> HTML中的元素.在HTML中包含多个具有相同ID的元素是非法的.相应地修复它:
<div id="#{cc.clientId}_map_canvas" ...>
和
... document.getElementById("#{cc.clientId}_map_canvas") ...
标签:composite-component,javascript,google-maps,jsf 来源: https://codeday.me/bug/20191012/1902916.html