在 asp.net 中使用 c# 在页面加载时调用 java 脚本函数

Question

我想在 asp.net 中使用 c# 在页面加载时调用 java 脚本函数，我的代码是， Asp.net 代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="lat_log_record.aspx.cs" Inherits="LAT_LOG.lat_log_record" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <title></title>
</head>

<body onload="getloc();">
    <form id="form1" runat="server">
        <script src="http://maps.google.com/maps/api/js?sensor=false">
        </script>

        <script type="text/javascript">
        function getloc() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    var latitude = position.coords.latitude;
                    var longitude = position.coords.longitude;
                    document.getElementById("<%=hfLat.ClientID %>").value = latitude;
                    document.getElementById("<%=hfLon.ClientID %>").value = longitude;
                    var coords = new google.maps.LatLng(latitude, longitude);
                    var mapOptions = {
                        zoom: 15,
                        center: coords,
                        mapTypeControl: true,
                        navigationControlOptions: {
                            style: google.maps.NavigationControlStyle.SMALL
                        },
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    map = new google.maps.Map(
                        document.getElementById("mapContainer"), mapOptions
                    );
                    var marker = new google.maps.Marker({
                        position: coords,
                        map: map,
                        title: "Your current location!"
                    });

                });
            } else {
                alert("Geolocation API is not supported in your browser.");
            }
        }
        </script>
        <style type="text/css">
        #mapContainer {
            height: 500px;
            width: 800px;
            border: 10px solid #eaeaea;
        }
        </style>
        <div id="mapContainer" runat="server" visible="false">
        </div>
        <asp:HiddenField ID="hfLat" runat="server" />
        <asp:HiddenField ID="hfLon" runat="server" />
        <asp:Button ID="btnSave" runat="server" Text="login" OnClick="btnSave_Click" />
        <asp:GridView ID="gvloc" runat="server">
        </asp:GridView>
        <asp:Label ID="lbllat" runat="server"></asp:Label>
        <asp:Label ID="lbllog" runat="server"></asp:Label>

    </form>
</body>

</html>

C#代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Net;
using System.Text;
using System.Data;

namespace LAT_LOG
{
    public partial class lat_log_record : System.Web.UI.Page
    {
        Class1 ob = new Class1();
        List<Class1> lst = new List<Class1>();
        protected void Page_Load(object sender, EventArgs e)
        {

            ScriptManager.RegisterStartupScript(this, this.GetType(), "Javascript", "javascript:getloc();", true);
            ob.lat = hfLat.Value;
            ob.log = hfLon.Value;
            lst.Add(ob);
            // lbllat.Text = latitude;
            // lbllog.Text = longitude;
            gvloc.DataSource = lst;
            gvloc.DataBind();
        }


        protected void btnSave_Click(object sender, EventArgs e)
        {

        }
    }

}

我想运行在页面加载时 java 脚本，但它只显示空白网格... 我尝试了其他选择，例如... 、winodows.onload 脚本 但它不起作用，需要帮助谢谢..！

Answer 1

使用DOMContentLoaded事件：

The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading (the load event can be used to detect a fully-loaded page).

document.addEventListener("DOMContentLoaded", function (event) {
    console.log("DOM fully loaded and parsed");
    getloc();
    // ^^^^^
});

Documentation

编辑

您在 a() 中嵌套了函数 getloc()。这就是 getloc() 未被调用的原因。您可以删除 function a() { 及其右括号 }。

否则，使用以下代码：

function a() {
    function getloc() {
        ...
    }
    getloc(); // call when `a` is called
}

EDIT-2

从正文中删除 return onload

<body onload="getloc();">

演示：https://jsfiddle.net/tusharj/yfpf3ksr/

Answer 2

通过查看您的代码，在 asp 页面上您在 body 标记内调用 getloc() 函数，而此 getloc() 在函数 a() 内，这似乎是错误的。删除 body 标签内的调用并尝试，服务器端代码可能会正常工作。

在 asp.net 中使用 c# 在页面加载时调用 java 脚本函数

call java script function on page load in asp.net using c#

javascript

c#

asp.net

latitude-longitude