从本地文件加载新窗口并访问其内容

时间：2019-03-26 06:31:05

标签： file background window local

我正在建立一个本地网页，该网页以HTML5视频标签显示视频。我只希望能够从PHP请求中进行数据库搜索，并显示可以单击并显示所需视频的结果。我的问题是，从“ file：///”链接加载时，这些视频的加载方式要比从“ http：//”链接加载时快。在“ HTTP”模式下，服务器可以正常工作，但在“ file：///”模式下，则没有任何工作，这很正常，因为PHP代码仅在请求服务器时才在服务器端执行。

我整天都在尝试太多东西。我将服务器更改为接受CORS，尝试使用window.open，将引用存储在本地或全局变量中，但是一旦退出javascript函数，我会立即丢失它。我在另一个函数调用的函数中尝试了window.open，但是无论我做什么，一旦离开函数或函数完成，窗口引用就会丢失。由于我的浏览器用作主浏览器，因此我不想禁用安全性CORS，但是由于我的网页的链接来自同一计算机上请求“ HTTP”的“ file：///”，CORS阻止了我并希望我无法提供的HTTP请求。

我已经完成了所有从另一个网页上检索信息的搜索，但是我始终会遇到“相同域”的问题。我尝试了AJAX HTTPRequest，但对于这个简单的问题，我没有更多的解决方案了，这比预期的要复杂得多。最初的问题只是我的视频在HTTP模式下加载速度不够快（速度差异非常大，对于10分钟的视频，我可以等待5-10秒来跳过它，而在FILE：/// urls中，这几乎是即时的，无需等待。更长的1小时视频，在file：///模式下，我最多可以等待20到30秒，几乎是即时。）而且我必须学习所有允许跨域的内容，但最终都没有成功。我认为也许其他几个负责人可能比我现在有更好的想法。

#In my httpd.conf file from Apache
DocumentRoot "e:/mainwebfolder"
Alias "/lp" "d:/whatever"

//////////////////////////////////////
// index.php file that does not contain PHP contents
// window.location.href: file://d:/whatever/index.php
//////////////////////////////////////
<head>
  <script src="html/servcom.js" type="text/javascript"></script>
</head>
<video id="vplayer" width="1280" height="720" controls></video>
<div id="search-form">
  <input id="srch" name="srch" type="text">
  &nbsp;<button class="bbut" onclick="ServInfo('search-results','http://127.0.0.1/lp/html/db.php','mode=s','search-form');">Search</button>
</div>
<div id='search-results'></div>

<script>
  var dplay = document.getElementById("vplayer");
ShowVideo('MyVideo.mp4');
  function ShowVideo (vidUrl) {
    dplay = document.getElementById("vplayer");
    dplay.src = vidUrl;
    dplay.load;
  }
</script>

//////////////////////////////////////
// Now this is in my javascript file servcom.js
//////////////////////////////////////
var win_ref = -1;

function ServInfo(pop_field_id,web_page,params="",form_id="",exec_string = "") {

  var sparams = params;
  var swpage = web_page;
  var eobj = document.getElementById(pop_field_id);
  var moreparams = "";

  // If we entered extra parameters including form fields,
  // add the the "&" before the form field list
  if (sparams != "") {moreparams = "&";}

  // Get form field values if a form id is specified
  if (form_id != "") {
    var efrm = document.getElementById(form_id);
    sparams += moreparams+GetDivFields(form_id);
  }

  // Add the question mark if there is any parameters to pass
  if (sparams != "") {
    sparams = "?"+sparams;
    // Add recieving objects reference
    sparams += "&srco="+pop_field_id;
  }

  // If HTML element to populate does not exist, exit
  if (typeof(eobj) == "!undefined" || eobj == null) {return;}

  win_ref = window.open(swpage+sparams,"_blank");
//////////////////////////////////////
// right here win_ref will never be available once the code from this function has been finished executing although the variable is global. The problem starts here.
//////////////////////////////////////

  // Execute a string if a user defined one
  if (exec_string != "") {eval(exec_string);}
}

// Build a parameter string with div fields of type text, hidden or password
function GetDivFields(div_id) {

  var ediv = document.getElementById(div_id);
  var elem = ediv.children;
  var retval = "";
  var ssep = "";

  for (var i = 0; i < elem.length; i++) {
  if (elem[i].type == "text" || elem[i].type == "hidden" || elem[i].type == "password") {
    retval += ssep+elem[i].name+"="+pURL(elem[i].value);
    ssep = "&";
  }
  if (elem[i].type == "checkbox") {
    if (elem[i].checked == true) {
      retval += ssep+elem[i].name+"="+elem[i].value;
      ssep = "&";
    }
  }
}

return retval;

}
//////////////////////////////////////
// And this is a brief overview of my db.php page
//////////////////////////////////////
<?php // Search Database code ?>
<div id="output"></div>
<script>
  document.getElementById('output').innerHTML = "<?php echo $search_results; ?>";
  // I actually want to retrieve the info from this div element once it has been populated from the initial page that called window.open for this page. BUT again. window.opener becomes empty once my initial window.open script finishes.
</script>

访问我新加载的页面的“输出” div innerHTML或通过本地HTTP加载视频，就像“ FILE：///”一样快。

1 个答案:

答案 0 :(得分：0)

好吧，我狂热地找到了解决方案。由于这仅用于本地和演示，因此我可以绕过一些证券。基本上，无需修改网站服务器配置或触摸任何.htaccess文件，即可完成我们通常不会在网站上进行的所有操作。基本上，没有安全限制，只是一个普通的老黑，不会对您的浏览器或服务器造成安全破坏。

要注意：

  1. 存在2个不同的网站（所以2个不同的文件夹位于非常不同的位置），其中1个用于开发和认真发布，一个用于内部和/或演示目的。

  2. 每个文件都位于演示文稿文件夹中的本地abd中。

  3. 无法从“ file：///”链接运行PHP代码。

  4. 通过PHP访问mysql数据库，服务器位于Apach24上

  5. 通过“ file：///”链接本地读取视频要比通过“ http：//”链接本地读取视频快

  6. 需要在MySQL数据库中使用“ http：//”链接进行搜索，并且结果必须显示在通过“ file：///”链接打开的网页上。

  7. 无需对浏览器的配置进行任何更改，因此禁用CORS并不是解决方案。

  8. 由于安全原因或CORS绕过不接受“ file：///”链接

    ，

PHP可以在我决定绕过CORS的服务器上写文件。由于通过AJAX进行的XML请求可以在同一原始域上完成，因此完全可以使用javascript。如果存在不包含PHP代码且位于同一域“文件：///”中的文件，则可以在没有任何问题的情况下读取其内容。

所以我只需在db.php文件中执行以下操作：

$s_mode = "";
$s_text = "";
$sres = "";

if (isset($_REQUEST["srch"])) {$s_text=$_REQUEST["srch"];}
if (isset($_REQUEST["mode"])) {$s_mode=$_REQUEST["mode"];}

if ($s_mode == "s") {
    $sres = SearchDB($s_text);
    WriteFile("D:/whatever/my_path/dbres.html",$sres);
}

// Writes the contents of the search in a specified file
function WriteFile($faddress,$fcontents) {
    $ifile = fopen($faddress,"w");
    fwrite($ifile,$fcontents);
    fclose($ifile);
}

现在使用正常的AJAX请求，我做了2件事。我选择使用具有“ display：none”样式的iframe，以免打扰其他标签页的打开。

  1. 执行在iframe中打开“ cross-doamin”链接的实际请求，WHICH执行我的db.php代码。我基本上是在iframe中打开“ http://127.0.0.1/whatever/db.php?param1=data&parma2=data”。

  2. 完成搜索并获得结果后，我的db.php将在结果中保存一个html文件，因为其内容位于“ file：///”直接位置的路径中，因此：“ D：/ what / my_path / dbres.html”。

我在servcom.js中添加了一个新功能。所以我新文件的内容如下：

// Show page info in another page element or window with parameters (for local use only)
function ServInfoLocal(dest_frame,web_page,params="",form_id="") {
    var sparams = params;
    var swpage = web_page;
    var iweb = document.getElementById(dest_frame);
    var moreparams = "";

    // If we entered extra parameters including form fields,
    // add the the "&" before the form field list
    if (sparams != "") {moreparams = "&";}

    // Get form field values if a form id is specified
    if (form_id != "") {
        var efrm = document.getElementById(form_id);
        sparams += moreparams+GetDivFields(form_id);
    }

    // If destination frame does not exist, exit
    if (typeof(iweb) == "!undefined" || iweb == null)   {return;}

    // Add the question mark if there is any parameters to pass
    if (sparams != "") {sparams = "?"+sparams;}

    // Show results in iframe
    iweb.src = swpage+sparams;

}

// AJAX simple HTTP GET request
function ServInfo(pop_field_id,web_page,params="",form_id="",append_data_to_output = "",exec_string = "",dont_show_results = "") {

    var sparams = params;
    var swpage = web_page;
    var eobj = document.getElementById(pop_field_id);
    var moreparams = "";

    // If we entered extra parameters including form fields,
    // add the the "&" before the form field list
    if (sparams != "") {moreparams = "&";}

    // Get form field values if a form id is specified
    if (form_id != "") {
        var efrm = document.getElementById(form_id);
        sparams += moreparams+GetDivFields(form_id);
    }

    // If HTML element to populate does not exist, exit
    if (typeof(eobj) == "!undefined" || eobj == null)   {return;}

    if (window.XMLHttpRequest) {
        // IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }
    else {
        // IE6-
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            // Do not show any results if requested
            if (dont_show_results == "") {
                if (append_data_to_output == "y") {
                    document.getElementById(pop_field_id).innerHTML += this.responseText;
                }
                if (append_data_to_output == "") {
                    document.getElementById(pop_field_id).innerHTML = this.responseText;
                }
            }
            // Execute a string if a user defined one
            if (exec_string != "") {
                eval(exec_string);
            }
        }
    };
    // Add the question mark if there is any parameters to pass
    if (sparams != "") {swpage += "?";}

    xmlhttp.open("GET",swpage+sparams,true);
    xmlhttp.send();

    }

// Build a parameter string with div fields of type text, hidden or password
function GetDivFields(div_id) {

    var ediv = document.getElementById(div_id);
    var elem = ediv.children;
    var retval = "";
    var ssep = "";

    for (var i = 0; i < elem.length; i++) {
        if (elem[i].type == "text" || elem[i].type == "hidden" || elem[i].type == "password") {
            retval += ssep+elem[i].name+"="+pURL(elem[i].value);
            ssep = "&";
        }
        if (elem[i].type == "checkbox") {
            if (elem[i].checked == true) {
                retval += ssep+elem[i].name+"="+elem[i].value;
                ssep = "&";
            }
        }
    }

    return retval;

}

现在，我的dbres.html文件将只包含div元素以及我需要在搜索请求来自的“ file：///”页面中显示的所有信息。所以我只在页面中放这个：

<div id="search-form" style="color:white;font-weight:bold;">
    <input id="srch" name="srch" type="text">
    &nbsp;<button class="bbut" onclick="ServInfoLocal('iweb','http://127.0.0.1/whatever/html/db.php','mode=s','search-form');">Search</button>
    <button class="bbut" onclick="ServInfo('search-results','dbres.html');">Click here</button>
</div>

<div id="search-results">Results here</div>

<iframe id="iweb" style="display:none;" src=""></iframe>

目前，我有2个按钮，一个用于搜索，一个用于显示新创建文件的结果。现在，我可以显示本地视频，这些视频将直接通过“ file：///”源加载到我的视频容器中，而无需通过http传递。我将使结果自动显示，从现在开始，我将可以自己做。

因此，如果地球上有人希望能够直接从Windows资源管理器中运行的本地文件中，在MySQL数据库中进行跨域搜索，实际上没有太多解决方案，我发现没有解决方案，所以这里至少有谁会需要这种解决方案的人。

对于那些好奇的人，我的下一步将是循环我的文件夹，直到使用另一个js函数显示我的dbres文件为止。提取完我的文件后，调用另一个php文件，该文件将破坏创建的文件，并且我准备从位于“ file：///”位置的网页上进行另一个数据库请求。

相关问题
最新问题