Question

我有一个PHP文件，可以从我的数据库中输出我的Google Analytics跟踪代码。但不幸的是我的网站前端是HTML。有没有办法使用Javascript来调用我的文件模板/ google-analytics-code.php并输出我的Google跟踪代码？

这是我输出跟踪代码的PHP文件：

<?php
include_once"../database.php";

$qry="select * from google_analytics";
$result=mysqli_query($con,$qry) or die(mysqli_error($con));

if ($result->num_rows > 0) {
    // output data of each row
    while($row = $result->fetch_assoc()) {
        $google_analytics_id = $row["google_analytics_id"]; 
    }
}

echo $google_analytics_id;
?>

的index.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="google-site-verification" content="VFDwnGJ-4 
    RPz2jHchu3ARhbY2GLqkvyII4IbtAR-aP0" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://www.istreamradio.ie/css/bootstrap.css">
    <link rel="stylesheet" href="http://www.istreamradio.ie/css/font-awesome.css">
    <meta name="google-signin-client_id" content="80957862538-juiu2cgia32rn3lik36fv9a1ihc6fqof.apps.googleusercontent.com">
    <link rel="stylesheet" href="http://www.istreamradio.ie/css/animate.css">
    <link rel="stylesheet" href="http://www.istreamradio.ie/css/style.css">
    <link rel="stylesheet" href="http://www.istreamradio.ie/css/player.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <title>Listen Radio</title>
    <base href="/">
</head>

<body ng-app="musiclistener">
    <p><span ng-include="'templates/cookiebar-settings.php'"></span>
        <span ng-cloak>
        <span ng-view ></span>
        </span>
    </p>
    <div id='player-container'>
        <audio controls id='music-player' src="#"></audio>

        <div class='container-fluid'>
            <div class='col-sm-1 col-xs-3 text-center' id='play-icon-container'>
                <i class='fa fa-play' id='play-btn' ng-click="playtoogle()">
        </i>
            </div>
            <div class='col-sm-1 center-block hidden-xs' id='podcast-icon-container'>
                <img src="{{ playerthumb }}" id='play-img' class='img-responsive center-block'>
            </div>
            <div class='col-md-6 col-sm-4 col-xs-6' id='podcast-bar-container'>
                <span style='color:#fff;position:relative;top:3px;text-transform:capitalize' ng-if="musicplayingentity">{{ musicplayingentity}}</span>
                <div id='podcast-progress'>
                    <div id='podcast-id-value'></div>
                </div>
            </div>
            <div class='col-md-1 col-sm-2 text-center hidden-xs' id='addons-icon-container'>

                <span ng-hide="userLoggedIn">
                    <a href data-toggle="modal" data-target="#loginModal"><i 
    class='fa fa-plus pull-left'></i></a>           
                    <a href data-toggle="modal" data-target="#loginModal"><i 
    class='fa fa-comment '></i></a>
                </span>

                <span ng-show="userLoggedIn">
                    <i ng-click="makeFavoritePlayer()" ng-hide="playingfav" class='fa fa-plus extrafun'></i>
                    <i ng-click="removeFavoritePlayer()" ng-show="playingfav" class='fa fa-check extrafun'></i>
                    <i ng-click="showCommentBoxPlayer()" class='fa fa-comment '></i>
                </span>

                <i class='fa fa-share pull-right' ng-click="shareboxPlayer()"></i>
            </div>
            <div class='col-sm-3 col-xs-3 text-center' id='volume-container'>
                <div class='col-xs-2'>
                    <i class='fa fa-volume-up'></i>
                </div>
                <div class='col-xs-1 col-md-9'>
                    <div id='volume-progress'>
                        <div id='volume-id-value'></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://apis.google.com/js/platform.js" async defer></script>
    <script src="http://www.istreamradio.ie/ang/angular.min.js"></script>
    <script src="http://www.istreamradio.ie/ang/angular-sanitize.min.js"></script>
    <script src="http://www.istreamradio.ie/ang/angular-route.min.js"></script>
    <script src="http://www.istreamradio.ie/ang/angular-cookies.min.js"></script>
    <script src="http://www.istreamradio.ie/ang/angular-facebook-sdk.js"></script>
    <script>
        window.fbAsyncInit = function () {
            FB.init({ appId: '195962897544265', xfbml: true, version: 'v2.8' });
        };
    </script>
    <script src="http://www.istreamradio.ie/ang/app.js"></script>
    <script src="http://www.istreamradio.ie/ang/controllers.js"></script>
    <script src='http://www.istreamradio.ie/js/jquery.js'></script>
    <script src='http://www.istreamradio.ie/js/bootstrap.js'></script>
    <script src='http://www.istreamradio.ie/js/typed.js'></script>
    <script src='http://www.istreamradio.ie/js/wow.js'></script>
    <script src='http://www.istreamradio.ie/js/player.js'></script>
    <script>
        new WOW().init();
    </script>
    <script>
        $(function () {
            $(".typing-text").typed({
                strings: ["MUSIC", "SPORTS", "BOOKS", "NEWS", "TALK"],
                typeSpeed: 200,
                backSpeed: 150,
                loop: true
            });
        });
    </script>
</body>
</html>

Answer 1

php必须存在于Web服务器上，能够侦听包含GET或POST数据的某种请求（最有可能是http），并做出相应的响应。你不能只用文件系统来做。

一个选项是使你的文件index.php而不是index.html并回显你想要的html。

Answer 2

你可以用AJAX做到这一点。

<script type="text/javascript">    
$.ajax({
    type: "GET",
    url: 'templates/google-analytics-code.php',  // make sure to give this a valid path
    success: function(data){
        // the data returned is passed to the success function.  You can do anything with it in here, like appending it to the DOM with jQuery.
        $('body').append(data);
    }
});
</script>

注意：您需要为此加载jQuery。

使用javascript在html文件中调用php文件

2 个答案: