Question

美好的一天，我有一个问题让我烦恼了几个小时。这非常直截了当。我在渲染复合组件时尝试调用/执行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（）;”

即可正常工作

Answer 1

在确定函数之前，您正在调用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>

对具体问题
无关：您的复合组件中存在另一个设计缺陷。此组件不能在同一视图中多次重复使用。您最终会在HTML中使用多个<div id="map_canvas">元素。 HTML中具有相同id的多个元素是非法的。相应地修复它：

<div id="#{cc.clientId}_map_canvas" ...>

和

... document.getElementById("#{cc.clientId}_map_canvas") ...

从复合组件执行JavaScript

1 个答案: