Javascript 提供类似JS或iframe的分析和statcounter到其他网页，以远程运行my PHP+；JS脚本

如何避免将我的源代码复制到其他服务器，并像analytics and statcounter提供的那样为它们提供JS或iframe

我用JS编写了一个PHP脚本，其基本描述如下： 当有人访问我的网站时，会得到一个具有唯一标识值的cookie，同时使用AJAX进行一些检查，并相应地将相同的值保存到mysql。在此之后，如果他再次访问我的站点，（在大多数情况下），将不会再次创建cookie

深度：

cookie值是用JS创建的，我希望在将来的增强中保持这种方式

我的代码（

index.php

，

addtomysql.php

）包含JS和php

我想在我的其他域中使用此脚本，其中一些域位于不同的服务器中但是我不想把我所有的源文件都放在那里

对我来说，理想的做法是为他们提供一个JS代码，比如google analytics或statcounter给我们的（或其他类似方式），一个iframe。。。像这样的解决方案

当访问者进入他们的页面时，将更新远程服务器（我的服务器）中的my mySQL，并在他们的站点上创建cookie。将数据从和传输到

这有可能吗？如果是，我如何开始学习？你能给我提供一些指导吗

多谢各位

这是一段代码，是一个ajax函数，它将随机数发布到

添加到mysql.php

文件中，我在该文件中执行一些操作

---

在我看来，你有三个选择

1。使用JSONP

JSONP允许您进行跨域ajax调用，这样您就可以从其他域直接调用您的家庭服务器，而不会受到阻碍。 我想这可能是最简单的路线

有关JSONP工作原理的快速评论，请参见此处：

jQuery支持jsonp，因此入门并不困难：

JSONP的工作原理是动态地向文档添加一个脚本，然后调用回调。 javascript文件的内容需要由服务器生成，您的PHP文件

添加到mysql.PHP

将必须响应如下内容：

<?= htmlspecialchars($_GET["callback"]) =>('someData you want to return');

2。使用CORS

CORS将允许您对不同的域进行ajax调用，而不是运行JS的域。但是，这确实需要您从提供服务的html页面发送特殊的http头，因此这确实需要您修改服务器

有关CORS的qucik简介，请参见此处：

简而言之，您需要从提供服务的html页面设置的标题为：

Access-Control-Allow-Origin: http://domain.com
Access-Control-Expose-Headers: list,of,headers

3。发布到iFrame

通过隐藏的iFrame发布也是一个选项。 为此，您需要将

表单的
目标
设置为
iframe
的
名称
，这里的优点是您还可以使用
POST
。您也可以通过jQuery提交和填充表单

$('#one_input').val('someHash');
$('#myForm').submit();

如果不想在页面上显示，可以将所有内容都放在隐藏的div中：

<div style='display:none;'>
    <form id="myForm" action="http://my-server.com/add-to-mysql.php" method="post" target="my_iframe">
       <input type="input" id="one_input" value="" />
    </form>
    <iframe name="my_iframe" ></iframe>
</div>

额外的

您还可以将iframe与

以前面的示例为基础：

$('#my_iframe')[0].contentWindow.postMessage('hash', 'my-server.com');

但这要求您已经在iframe中加载了一个页面，然后该页面将通过JavaScript接收消息，因此我认为这不是您要寻找的内容。
为了避免跨域问题，您可以在其他站点包含一个iframe，从您的站点加载。它创建自己的范围（域），您可以在与站点通信的内部自由使用ajax。
但是，如果您在那里设置cookie，它将与iframes源域（您的域）相关联。这可能是个问题，也可能不是。注意，这可用于识别所有其他域的用户，包括同一iframe（来自您的域）。
谷歌分析提供了一个不发布数据的脚本，它异步加载脚本（这对于避免混淆原始网站的加载时间非常重要），然后它会发送他们所有的信息，请求一个.gif图像。您的代码应该请求一个以.gif结尾的url，并且所有数据都是GET格式。施展你的魔法，返回一个大小为1px*1px且没有内容的gif

就要求这样的东西

yourdomain.com/a.gif?cookie=1234aqfajsdlq....&uid=qekjlajdfa

把你所有的数据都放进去
我建议对其进行一点模糊处理，但这将有助于避免COR、IFRAME或jsop

编辑

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'id', 'domain');
  ga('send', 'pageview');
</script>


（函数（i，s，o，g，r，a，m）{i['GoogleAnalyticsObject']=r；i[r]=i[r]| |函数（）{
（i[r].q=i[r].q | |[]）.push（参数）}，i[r].l=1*新日期（）；a=s.createElement（o），
m=s.getElementsByTagName（o）[0]；a.async=1；a.src=g；m.parentNode.insertBefore（a，m）
})（窗口，文档，“脚本”，“www.google-analytics.com/analytics.js”，“ga”）；
ga（‘创建’、‘id’、‘域’）；
ga（‘发送’、‘页面浏览’）；

这是从GA中获取的。请注意，它创建了一个带有async属性的标记，以避免加载时间问题（请记住，同步脚本会停止页面呈现）。然后，它创建一个数组，将所需的所有信息放入元组中。它将窗口中的ga定义为将其所有参数推送到q的函数。
您可以创建一个脚本，使用js、cookie、域等获取所需的所有数据并发送到服务器。
例如，您希望用户正在访问的域：

//You won't have jquery, but you get the idea
//Create a tag
var i = $('<img>').prop('src', 'yourdomain.com/a.gif?domain' + window.location.origin).css('display', 'none');
$('body').append(i);

//您将没有jquery，但您已经有了这个想法
//创建一个标记
变量i=$（'
在某些情况下，你必须设置cookie。我认为cookie不能跨域，所以你应该在你的请求中设置它们，而不是在js中。
在服务器端，您检查cookie，如果没有cookie，则创建cookie，并在那里跟踪许多内容

之后，您的脚本可以检查cors支持，并在没有这个支持的情况下使用ajax
yourdomain.com/a.gif?cookie=1234aqfajsdlq....&uid=qekjlajdfa

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'id', 'domain');
  ga('send', 'pageview');
</script>

//You won't have jquery, but you get the idea
//Create a tag
var i = $('<img>').prop('src', 'yourdomain.com/a.gif?domain' + window.location.origin).css('display', 'none');
$('body').append(i);