Fatal编程技术网
  • javascript/
  • 如何指示当前查看站点的所有设备使用PHP运行JavaScript函数？

如何指示当前查看站点的所有设备使用PHP运行JavaScript函数？

javascript php jquery function

如何指示当前查看站点的所有设备使用PHP运行JavaScript函数？,javascript,php,jquery,function,Javascript,Php,Jquery,Function,我最近一直在尝试一些PHP，我以前的项目是这样做的，当我点击一个按钮时，它会运行一些PHP代码，编辑一个文本文件，并在当时查看网站的所有设备上更改它。现在我有了一个新的项目，就是让点击按钮使用PHP在所有浏览网站的设备上直接运行JavaScript函数。如何在所有使用PHP的设备上运行JavaScript函数 谢谢，Fjpackard 编辑：这个主题被搁置了，因为我对it/代码示例没有任何理解。我不完全确定我需要放的代码是什么，我已经理解了上面的内容，但下面是我最终使用的代码： Script.p

我最近一直在尝试一些PHP，我以前的项目是这样做的，当我点击一个按钮时，它会运行一些PHP代码，编辑一个文本文件，并在当时查看网站的所有设备上更改它。现在我有了一个新的项目，就是让点击按钮使用PHP在所有浏览网站的设备上直接运行JavaScript函数。如何在所有使用PHP的设备上运行JavaScript函数

谢谢，Fjpackard

编辑：这个主题被搁置了，因为我对it/代码示例没有任何理解。我不完全确定我需要放的代码是什么，我已经理解了上面的内容，但下面是我最终使用的代码：

Script.php：

<?php
    // Disable cache
    header("Expires: Thu, 01 Jan 1970 00:00:00 GMT");
    header('Cache-Control: max-age=0, no-cache, no-store, must-revalidate');
    header('Cache-Control: post-check=0, pre-check=0', false);
    header("Pragma: no-cache");

    $file = 'file.txt';

    if ($_SERVER['REQUEST_METHOD'] === 'POST')
    {
        // POST request

        $previous = file_get_contents($file);
        if ($previous === 'true')
        {
            file_put_contents($file, 'false');
        }
        else
        {
            file_put_contents($file, 'true');
        }
    }
    else
    {
        // not POST request, we assume it's GET

        echo file_get_contents($file);
    }
    exit();
?>

<?php
    // disable cache
    header("Expires: Thu, 01 Jan 1970 00:00:00 GMT");
    header('Cache-Control: max-age=0, no-cache, no-store, must-revalidate');
    header('Cache-Control: post-check=0, pre-check=0', false);
    header("Pragma: no-cache");

    $file = 'file.txt';

    if ($_SERVER['REQUEST_METHOD'] === 'POST')
    {
        if (array_key_exists('command', $_POST))
        {
            $command = $_POST['command'];
            if (ValidateCommand($command))
            {
                StoreCommand($command);
            }
        }
    }
    else
    {
        // not POST request, we assume it's GET

        echo RetrieveCommand();
    }
    exit();
?>
Index.html：

希望这有帮助

干杯，
Fjpackard.

您需要使用WebSocket:

在PHP中，您可以使用：

这将不起作用，因为PHP运行服务器端和JavaScript客户端。您需要的是一个请求服务器执行某些操作的客户端JavaScript。如果您不想每x秒重新加载一次页面，那么您需要Ajax之类的东西。客户端请求服务器做一些事情，您可以通过从客户端JavaScript调用服务器来设置要做的事情。 客户1想让客户2做点什么。 Client1调用服务器为Client2保存要执行的操作 Client2每隔x秒向服务器请求一些事情要做，并通过这种方式从Client1获得一些事情要做。 这不是很有效，因为它会产生很多服务器负载，所以您可能会使用套接字之类的东西。HTML5提供了一些功能

轻溶液 当您事先知道要运行的代码是什么时，此解决方案适用。但您希望在服务器注意到时运行它

此解决方案基于我在上一个问题中提供的代码

script.php：

<?php
    // Disable cache
    header("Expires: Thu, 01 Jan 1970 00:00:00 GMT");
    header('Cache-Control: max-age=0, no-cache, no-store, must-revalidate');
    header('Cache-Control: post-check=0, pre-check=0', false);
    header("Pragma: no-cache");

    $file = 'file.txt';

    if ($_SERVER['REQUEST_METHOD'] === 'POST')
    {
        // POST request

        $previous = file_get_contents($file);
        if ($previous === 'true')
        {
            file_put_contents($file, 'false');
        }
        else
        {
            file_put_contents($file, 'true');
        }
    }
    else
    {
        // not POST request, we assume it's GET

        echo file_get_contents($file);
    }
    exit();
?>

<?php
    // disable cache
    header("Expires: Thu, 01 Jan 1970 00:00:00 GMT");
    header('Cache-Control: max-age=0, no-cache, no-store, must-revalidate');
    header('Cache-Control: post-check=0, pre-check=0', false);
    header("Pragma: no-cache");

    $file = 'file.txt';

    if ($_SERVER['REQUEST_METHOD'] === 'POST')
    {
        if (array_key_exists('command', $_POST))
        {
            $command = $_POST['command'];
            if (ValidateCommand($command))
            {
                StoreCommand($command);
            }
        }
    }
    else
    {
        // not POST request, we assume it's GET

        echo RetrieveCommand();
    }
    exit();
?>
index.htm：

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
    function myClick()
    {
        $.post('script.php', {});
    }

    function RunOnDemand(value)
    {
        //The code you want to run on the clients
        $("#theDiv").html(value);
    }

    var lastValue = '';

    $("document").ready(
        function()
        {
            setInterval(
                function()
                {
                    $.get(
                        'script.php',
                        {},
                        function (data)
                        {
                            if (data != lastValue)
                            {
                                RunOnDemand(data);
                                lastValue = data;
                            }
                        }
                    );
                },
                500
            );
        }
    );
</script>
<div id="theDiv"></div>
<input type="button" value="click me" onclick="myClick()">

<DOCTYPE html>
<script src="code.php"></script>

<DOCTYPE html>
<head>
    <script>
        function loadScript(url)
        {
            var head = document.getElementsByTagName("head")[0] ||
                       document.documentElement;
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.async = true;
            script.src = url;
            head.insertBefore(script, head.firstChild);
        }
    </script>
</head>
<input type="button" onclick="loadScript('code.php')" value="click"/>

<DOCTYPE html>
<head>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        function loadScript(url)
        {
            var head = document.getElementsByTagName("head")[0] ||
                       document.documentElement;
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.async = true;
            script.src = url;
            head.insertBefore(script, head.firstChild);
        }

        function send(command)
        {
            $.post(
                'script.php',
                {command : command}
            );
        }
    </script>
</head>
<input type="button" onclick="loadScript('code.php')" value="click"/>
<input type="button" onclick="send('A')" value="send A"/>
<input type="button" onclick="send('B')" value="send B"/>

<DOCTYPE html>
<head>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        function loadScript(url)
        {
            var head = document.getElementsByTagName("head")[0] ||
                       document.documentElement;
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.async = true;
            script.src = url;
            head.insertBefore(script, head.firstChild);
        }

        function send(command)
        {
            $.post(
                'script.php',
                {command : command}
            );
        }

        $("document").ready(
            function()
            {
                setInterval(
                    function()
                    {
                        $.get(
                            'script.php',
                            {},
                            function (data)
                            {
                                console.log(data);
                            }
                        );
                    },
                    500
                );
            }
        );
    </script>
</head>
<input type="button" onclick="loadScript('code.php')" value="click"/>
<input type="button" onclick="send('A')" value="send A"/>
<input type="button" onclick="send('B')" value="send B"/>

<DOCTYPE html>
<head>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        function loadScript(url)
        {
            var head = document.getElementsByTagName("head")[0] ||
                       document.documentElement;
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.async = true;
            script.src = url;
            head.insertBefore(script, head.firstChild);
        }

        function send(command)
        {
            $.post(
                'script.php',
                {command : command}
            );
        }

        var lastCommand = '';

        $("document").ready(
            function()
            {
                setInterval(
                    function()
                    {
                        $.get(
                            'script.php',
                            {},
                            function (data)
                            {
                                if (data != lastCommand)
                                {
                                    loadScript('code.php?command=' + data);
                                    lastCommand = data;
                                }
                            }
                        );
                    },
                    500
                );
            }
        );
    </script>
</head>
<input type="button" onclick="send('A')" value="send A"/>
<input type="button" onclick="send('B')" value="send B"/>
<div id="theDiv"></div>
注1：我们不再使用函数load，而是使用函数get，该函数将向服务器发出get请求，并允许我们处理响应

注2：我们正在跟踪变量lastValue中接收到的最后一个值。这样我们就避免了每次定时器启动时都运行RunOnDemand

重溶液 当您事先不知道要运行的代码是什么时，此解决方案适用。因此，代码将由服务器提供

要做到这一点，需要采取一些步骤

能够从PHP提供JavaScript 能够根据需要从服务器请求代码 能够向服务器发送命令 能够从服务器读取命令 能够根据通知的命令请求代码 我将在每个步骤中显示代码，使其更易于理解

能够从PHP提供JavaScript 可以从PHP提供JavaScript代码。使用PHP提供JavaScript需要设置正确的标题，例如：

code.php：

<?php header("Content-type: text/javascript"); ?>
alert('hello');

<?php header("Content-type: text/javascript");
    if (array_key_exists('command', $_GET))
    {
        if (ValidateCommand($_GET['command']))
        {
            echo '$(\'#theDiv\').html(\''.$_GET['command'].'\');';
        }
    }
    exit();
?>
能够向服务器发送命令 我将提供一些PHP代码来处理这些命令，尽管细节将取决于您的实现。也就是说：我将使用一些您必须实现的函数

script.php：

<?php
    // Disable cache
    header("Expires: Thu, 01 Jan 1970 00:00:00 GMT");
    header('Cache-Control: max-age=0, no-cache, no-store, must-revalidate');
    header('Cache-Control: post-check=0, pre-check=0', false);
    header("Pragma: no-cache");

    $file = 'file.txt';

    if ($_SERVER['REQUEST_METHOD'] === 'POST')
    {
        // POST request

        $previous = file_get_contents($file);
        if ($previous === 'true')
        {
            file_put_contents($file, 'false');
        }
        else
        {
            file_put_contents($file, 'true');
        }
    }
    else
    {
        // not POST request, we assume it's GET

        echo file_get_contents($file);
    }
    exit();
?>

<?php
    // disable cache
    header("Expires: Thu, 01 Jan 1970 00:00:00 GMT");
    header('Cache-Control: max-age=0, no-cache, no-store, must-revalidate');
    header('Cache-Control: post-check=0, pre-check=0', false);
    header("Pragma: no-cache");

    $file = 'file.txt';

    if ($_SERVER['REQUEST_METHOD'] === 'POST')
    {
        if (array_key_exists('command', $_POST))
        {
            $command = $_POST['command'];
            if (ValidateCommand($command))
            {
                StoreCommand($command);
            }
        }
    }
    else
    {
        // not POST request, we assume it's GET

        echo RetrieveCommand();
    }
    exit();
?>
缺少功能的示例：

function ValidateCommand($command)
{
if ($command === 'A' || $command === 'B')
    {
        return true;
    }
    else
    {
        return false;
    }
}

function StoreCommand($command)
{
    file_put_contents('file.txt', $command);
}

function RetrieveCommand()
{
    return file_get_contents('file.txt');
}
我建议将此函数保存到一个单独的文件中，然后通过添加

4.能够从服务器读取命令 现在，我们有了在服务器中发送和存储命令的机制，我们需要能够在客户机中获取命令

index.htm：

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
    function myClick()
    {
        $.post('script.php', {});
    }

    function RunOnDemand(value)
    {
        //The code you want to run on the clients
        $("#theDiv").html(value);
    }

    var lastValue = '';

    $("document").ready(
        function()
        {
            setInterval(
                function()
                {
                    $.get(
                        'script.php',
                        {},
                        function (data)
                        {
                            if (data != lastValue)
                            {
                                RunOnDemand(data);
                                lastValue = data;
                            }
                        }
                    );
                },
                500
            );
        }
    );
</script>
<div id="theDiv"></div>
<input type="button" value="click me" onclick="myClick()">

<DOCTYPE html>
<script src="code.php"></script>

<DOCTYPE html>
<head>
    <script>
        function loadScript(url)
        {
            var head = document.getElementsByTagName("head")[0] ||
                       document.documentElement;
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.async = true;
            script.src = url;
            head.insertBefore(script, head.firstChild);
        }
    </script>
</head>
<input type="button" onclick="loadScript('code.php')" value="click"/>

<DOCTYPE html>
<head>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        function loadScript(url)
        {
            var head = document.getElementsByTagName("head")[0] ||
                       document.documentElement;
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.async = true;
            script.src = url;
            head.insertBefore(script, head.firstChild);
        }

        function send(command)
        {
            $.post(
                'script.php',
                {command : command}
            );
        }
    </script>
</head>
<input type="button" onclick="loadScript('code.php')" value="click"/>
<input type="button" onclick="send('A')" value="send A"/>
<input type="button" onclick="send('B')" value="send B"/>

<DOCTYPE html>
<head>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        function loadScript(url)
        {
            var head = document.getElementsByTagName("head")[0] ||
                       document.documentElement;
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.async = true;
            script.src = url;
            head.insertBefore(script, head.firstChild);
        }

        function send(command)
        {
            $.post(
                'script.php',
                {command : command}
            );
        }

        $("document").ready(
            function()
            {
                setInterval(
                    function()
                    {
                        $.get(
                            'script.php',
                            {},
                            function (data)
                            {
                                console.log(data);
                            }
                        );
                    },
                    500
                );
            }
        );
    </script>
</head>
<input type="button" onclick="loadScript('code.php')" value="click"/>
<input type="button" onclick="send('A')" value="send A"/>
<input type="button" onclick="send('B')" value="send B"/>

<DOCTYPE html>
<head>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        function loadScript(url)
        {
            var head = document.getElementsByTagName("head")[0] ||
                       document.documentElement;
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.async = true;
            script.src = url;
            head.insertBefore(script, head.firstChild);
        }

        function send(command)
        {
            $.post(
                'script.php',
                {command : command}
            );
        }

        var lastCommand = '';

        $("document").ready(
            function()
            {
                setInterval(
                    function()
                    {
                        $.get(
                            'script.php',
                            {},
                            function (data)
                            {
                                if (data != lastCommand)
                                {
                                    loadScript('code.php?command=' + data);
                                    lastCommand = data;
                                }
                            }
                        );
                    },
                    500
                );
            }
        );
    </script>
</head>
<input type="button" onclick="send('A')" value="send A"/>
<input type="button" onclick="send('B')" value="send B"/>
<div id="theDiv"></div>
注意：您必须再次使用函数ValidateCommand。请注意，弱实现将允许恶意客户端在所有客户端上运行任意JavaScript代码

后记 我们已经了解了如何使用PHP提供JavaScript代码，以及如何根据需要从请求在客户端上执行这些代码。也就是说：本示例不仅使用Ajax从服务器获取数据，还将获取JavaScript代码并执行它。到目前为止，代码正在更新div的内容，这种方法会带来巨大的开销和安全风险，但是这种技术可以用于更复杂的场景

您可能只对链接会话标识的几个客户端感兴趣。对于这种任务，数据库更适合，因为它可以保存每个链接组的记录。要使此代码适应该用途，您需要调整ValidateCommand、StoreCommand和RetrieveCommand的实现

如果您收到一条消息说ValidateCommand未定义。这意味着你一直在复制粘贴。正如我前面提到的，您需要实现自己的ValidateCommand、StoreCommand和RetrieveCommand。我在前面提供了这些函数的一个示例。对于使用文件存储的示例，请检查一下。

为什么要使用PHP？按钮在客户端上呈现。如果您谈论的是服务器端JS，那么JavaScript可能会在客户端上运行
你应该这么说。PHP只能在服务器上运行。我不只是想在客户端上运行JS，我想在所有查看网站的客户端上运行它。如果有道理的话；请不要重新编辑成问题。但是，是的，现在这更有意义了。HTTP是断开连接的协议。所有设备都不知道其他设备中发生了什么。实现这一点的一种方法是更新服务器上的数据库或文件，而所有其他设备都在监视并等待此更改的发生。捕获更改后，您的所有设备都会知道发生了什么。您可以将轮询时间减少到5-10秒或更少-应该可以工作。。。否则准备学习曲线w/socket.io+node.js最正确的答案非常感谢！这很有效。非常感谢你花这么多时间帮助我+感谢你的辛勤工作！