javascript - 如何将 JavaScript 响应转换为 HTML-6ren

javascript - 如何将 JavaScript 响应转换为 HTML

转载作者：行者123 更新时间：2023-12-03 06:28:05

我有一个 HTML 文件，需要 token 才能访问某些数据(来自 ArcGIS Online)。单独的 JavaScript 文件应调用该服务并获取 token 。然后， token 需要以某种方式传递到 HTML 文件中，这是我不确定的一点。

无论如何，代码:

JavaScript 文件 (GetAToken.js)

var request = require('request'); // npm install request

// generate a token with your client id and client secret
function getToken(callback)
{
    request.post(
    {
        url: 'https://www.arcgis.com/sharing/rest/oauth2/token/',
        json: true,
        form:
        {
            'f': 'json',
            'client_id': '<<MY CLIENT_ID>>',
            'client_secret': '<<MY CLIENT_SECRET>>',
            'grant_type': 'client_credentials',
            'expiration': '1440'
        }
    }, function (error, response, body)
    {
        console.log(body.access_token);
        callback(body.access_token);
    });
}

以及 HTML 中的相关位

<script src="GetAToken.js"></script>
</head>
<body onload="getToken()">
<div class="embed-container">
    <iframe width="500"
            height="400"
            frameborder="0"
            scrolling="no"
            marginheight="0"
            marginwidth="0"
            title="Test Map" src="//MyMap.maps.arcgis.com/apps/webappviewer/index.html?id=LongMapID?token=I_Need_My_Token_Here&amp;extent=1,-1,1,-1&amp;zoom=true&amp;scale=true&amp;search=true&amp;searchextent=true&amp;legend=true&amp;basemap_gallery=true&amp;disable_scroll=true&amp;theme=light">
    </iframe>
</div>

</body>
</html>

如果您查看 HTML 中的 div，就会发现这就是我需要 token 的地方。 JavaScript 显然返回一个名为 access_token 的值，并使用 node.js 编写

编辑

新的GetAToken.js

const request = require('request'); // npm install request
const express = require('express');
const app = express();

// generate a token with your client id and client secret
//function getToken(callback)
app.get('/GetAToken', (req, res) => {
    request.post(
    {
        url: 'https://www.arcgis.com/sharing/rest/oauth2/token/',
        json: true,
        form:
        {
            'f': 'json',
            'client_id': '<<MY_CLIENT_ID>>',
            'client_secret': '<<MY_CLIENT_SECRET>>',
            'grant_type': 'client_credentials',
            'expiration': '1440'
        }
    }, function (error, response, body) {
        console.log(body.access_token);
        callback(body.access_token);
    });
});
app.listen(80);

更新了 HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Title</title>
    <link href="https://esri.github.io/calcite-bootstrap/assets/css/calcite-bootstrap-open.min.css" rel="stylesheet">
    <style>
        .footer
        {
            height: 6.25rem;
        }
    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://esri.github.io/calcite-bootstrap/assets/js/bootstrap.min.js"></script>
    <script src="https://js.arcgis.com/3.17/"></script>
    <script src="GetAToken.js"></script>
    <script type="text/javascript">

        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function()
        {
            if(xhttp.readyState === 4 && xhttp.status === 200)
            {
                var responseJSON = JSON.parse(xhttp.responseText);
                var token = responseJSON.token;
                alert(token);
            }
        }
        xhttp.open("GET", "GetAToken", true);
        xhttp.send();    

    </script>

</head>
<body>

    <style>
        .embed-container
        {
            position: relative;
            padding-bottom: 50%;
            height: 0;
            max-width: 100%;
        }
        .embed-container iframe, .embed-container object, .embed-container iframe
        {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        small
        {
            position: absolute;
            z-index: 40;
            bottom: 0;
            margin-bottom: -15px;
        }
    </style>
    <div class="embed-container">
        <iframe width="500"
                height="400"
                frameborder="0"
                scrolling="no"
                marginheight="0"
                marginwidth="0"
                title="Test Map" src="//MyMap.maps.arcgis.com/apps/webappviewer/index.html?id=MyLongID&amp;extent=1,-1,1,-1&amp;zoom=true&amp;scale=true&amp;search=true&amp;searchextent=true&amp;legend=true&amp;basemap_gallery=true&amp;disable_scroll=true&amp;theme=light">
        </iframe>
    </div>

</body>
</html>

最佳答案

您将希望以某种方式向客户端提供对该 arcgis 请求的响应。下面是一个使用 Express 的示例:

const request = require('request'); // npm install request
const express = require('express'); // npm install express
const app = express();

app.get('/get-a-token', (req, res) => 
{
        request.post(
        {
                url: 'https://www.arcgis.com/sharing/rest/oauth2/token/',
                json: true,
                form:
                {
                        'f': 'json',
                        'client_id': '<<MY CLIENT_ID>>',
                        'client_secret': '<<MY CLIENT_SECRET>>',
                        'grant_type': 'client_credentials',
                        'expiration': '1440'
                }
        }, function (error, response, body)
        {
                console.log(body.access_token);
                res.json({token: body.access_token});
        });
});

app.listen(80);

然后在客户端上，您可以执行以下操作来从服务器获取值:

<script type="text/javascript">
    // You may want to move this to another file..
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (xhttp.readyState === 4 && xhttp.status === 200) {
            var responseJSON = JSON.parse(xhttp.responseText);
            var token = responseJSON.token;

            var iframe = document.querySelectorAll('iframe')[0]
            iframe.src = "//MyMap.maps.arcgix.com/apps/webappviewer/index.html?id=LongMapID?token=" + token + "&amp;extent=1,-1,1,-1&amp;zoom=true&amp;scale=true&amp;search=true&amp;searchextent=true&amp;legend=true&amp;basemap_gallery=true&amp;disable_scroll=true&amp;theme=light"
        }
    }
    xhttp.open("GET", "http://yournodeserver.com/get-a-token", true);
    xhttp.send();
</script>

您可能需要采取一些措施来保护 /get-a-token 路由不被您以外的网站访问。

如果您也使用 node/express 提供 html 文件，那么您可以通过在将 token 提供给客户端之前将 token 插入到 html 中来解决此问题

关于javascript - 如何将 JavaScript 响应转换为 HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38557965/