Javascript 如果客户端来自外部ip，则更改img src标记_Javascript_Php_Html

Javascript 如果客户端来自外部ip，则更改img src标记

javascript php html

Javascript 如果客户端来自外部ip，则更改img src标记,javascript,php,html,Javascript,Php,Html,我是一名初学者/程序员爱好者。我正在开发一个网络摄像头应用程序，通过拼接我在网上找到的代码，它也有一些gpio引脚。我在index.php文件中有一个img src标记，它需要根据我是从局域网内还是从外部访问页面而改变我在另一个论坛上发现了以下信息，如果我手动将img src标记更改为内部或外部ip（取决于我是否在局域网上），则可以使用这些信息，但我希望能够从其中任何一个访问页面，而无需手动更改index.php文件我在raspberry pi论坛上找到的选项：更改标记以使用外部IP。如果

我是一名初学者/程序员爱好者。我正在开发一个网络摄像头应用程序，通过拼接我在网上找到的代码，它也有一些gpio引脚。我在index.php文件中有一个img src标记，它需要根据我是从局域网内还是从外部访问页面而改变

我在另一个论坛上发现了以下信息，如果我手动将img src标记更改为内部或外部ip（取决于我是否在局域网上），则可以使用这些信息，但我希望能够从其中任何一个访问页面，而无需手动更改index.php文件

我在raspberry pi论坛上找到的选项：更改标记以使用外部IP。如果这破坏了内部网络，您可以使用一个单独的页面来表示内部和外部，或者您可以编写一个脚本来确定http客户端是来自内部还是外部IP，并相应地更改标记

有人能告诉我如何实现一个备用索引页或脚本，根据客户机是在外部网络还是内部网络上更改img src标记吗

以下是带有img src标记的索引页的代码：

    <!DOCTYPE html>
    !--TheFreeElectron 2015,        http://www.instructables.com/member/TheFreeElectron/ -->

<html>
<head>
    <meta charset="utf-8" />
    <title>Raspberry Pi Gpio</title>
</head>
 <body style="background-color: black;">    
    <center>
    <img src="http://192.168.0.34:8080/stream/video.mjpeg">
    </center>
 <!-- On/Off button's picture -->       
<?php
$val_array = array(0,0,0,0,0,0,0,0);
//this php script generate the first page in function of the file
for ( $i= 0; $i<8; $i++) {
    //set the pin's mode to output and read them
    system("gpio mode ".$i." out");
    exec ("gpio read ".$i, $val_array[$i], $return );
}
//for loop to read the value
$i =0;
for ($i = 0; $i < 8; $i++) {
    //if off
    if ($val_array[$i][0] == 0 ) {
        echo ("<img id='button_".$i."' src='data/img/red/red_".$i.".jpg' onclick='change_pin (".$i.");'/>");
    }
    //if on
    if ($val_array[$i][0] == 1 ) {
        echo ("<img id='button_".$i."' src='data/img/green/green_".$i.".jpg' onclick='change_pin (".$i.");'/>");
    }    
}
?>
<!-- javascript -->
    <script src="script.js"></script>
 </body>
</html>


!--自由电子2015，http://www.instructables.com/member/TheFreeElectron/ -->
树莓皮
如果使用PHP呈现页面，则可以获取请求的IP，并根据结果更改呈现的输出
在回答帖子中列出了一些安全问题，但鉴于这只是用来更改映像的src
，我相信对于试图“欺骗”其IP的人来说，没有什么真正的问题（除了可能暴露您的内部IP配置）
<?php 
    // https://stackoverflow.com/a/15699240/648350
    // Function to get the client IP address
    function get_client_ip() {
        $ipaddress = '';
        if (isset($_SERVER['HTTP_CLIENT_IP']))
            $ipaddress = $_SERVER['HTTP_CLIENT_IP'];
        else if(isset($_SERVER['HTTP_X_FORWARDED_FOR']))
            $ipaddress = $_SERVER['HTTP_X_FORWARDED_FOR'];
        else if(isset($_SERVER['HTTP_X_FORWARDED']))
            $ipaddress = $_SERVER['HTTP_X_FORWARDED'];
        else if(isset($_SERVER['HTTP_FORWARDED_FOR']))
            $ipaddress = $_SERVER['HTTP_FORWARDED_FOR'];
        else if(isset($_SERVER['HTTP_FORWARDED']))
            $ipaddress = $_SERVER['HTTP_FORWARDED'];
        else if(isset($_SERVER['REMOTE_ADDR']))
            $ipaddress = $_SERVER['REMOTE_ADDR'];
        else
            $ipaddress = 'UNKNOWN';
        return $ipaddress;
    }
    // define our default image src prefix
    $image_src_prefix = "http://192.168.0.34:8080/";
    const LOCAL_IP_PREFIX = "192.168."; // define our local ip prefix (ie. some LAN's use "10.0.")
    // test for ip starting with our local IP prefix
    if( substr(get_client_ip(), 0, strlen(LOCAL_IP_PREFIX)) !== LOCAL_IP_PREFIX ){
        // we are NOT local so update the image src prefix
        $image_src_prefix = "http://INSERT_EXTERNAL_IP_HERE/";
    }
?>
<!DOCTYPE html>
    !--TheFreeElectron 2015,        http://www.instructables.com/member/TheFreeElectron/ -->

<html>
<head>
    <meta charset="utf-8" />
    <title>Raspberry Pi Gpio</title>
</head>
 <body style="background-color: black;">    
    <center>
    <img src="<?php echo $image_src_prefix; ?>/stream/video.mjpeg">
    </center>
 <!-- On/Off button's picture -->      
<?php
$val_array = array(0,0,0,0,0,0,0,0);
//this php script generate the first page in function of the file
for ( $i= 0; $i<8; $i++) {
    //set the pin's mode to output and read them
    system("gpio mode ".$i." out");
    exec ("gpio read ".$i, $val_array[$i], $return );
}
//for loop to read the value
$i =0;
for ($i = 0; $i < 8; $i++) {
    //if off
    if ($val_array[$i][0] == 0 ) {
        echo ("<img id='button_".$i."' src='data/img/red/red_".$i.".jpg' onclick='change_pin (".$i.");'/>");
    }
    //if on
    if ($val_array[$i][0] == 1 ) {
        echo ("<img id='button_".$i."' src='data/img/green/green_".$i.".jpg' onclick='change_pin (".$i.");'/>");
    }   
}
?>
<!-- javascript -->
    <script src="script.js"></script>
 </body>

只是不要在src中包含主机名：
内部IP是单一的静态IP，还是一系列不同的IP？您可能需要使用JS“热加载”映像。执行类似于if（window.location.test（/192\.168\./）{/*是本地的*/}或者{/*是外部的*/}
从正则表达式testThank@haxxxton构建图像的src。但我不确定在哪里添加此代码。我尝试在原始代码的底部添加此代码。请参见下文，但不正确。您能帮助我正确添加此代码吗？if（window.location.test（/192\.168\./）{}else{}}？>@Zac Webb内部ip是一个单一的静态ip。在我的局域网内，我可以使用上面代码中显示的ip地址和端口查看视频。要从局域网外查看视频，我必须转发端口，并将上面代码中的ip更改为调制解调器的ip，但我只能从局域网外查看，并且我有c再次将其挂起以在我的局域网中查看。谢谢！效果很好！感谢您实际发布代码。这非常有帮助。