javascript - 从复合组件执行 JavaScript

Question

美好的一天，我有一个问题已经困扰我几个小时了。这非常简单。我尝试在呈现复合组件时调用/执行 JavaScript。就像你可以用 html 标签 body 和 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>

---

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

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

和

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