当我在函数中使用新的 XMLHttpRequest 时，所有页面都重新加载答案

【问题标题】：When I use new XMLHttpRequest in a function all page reload当我在函数中使用新的 XMLHttpRequest 时，所有页面都重新加载
【发布时间】：2023-03-29 14:23:01
【问题描述】：

我正在尝试一个星期来寻找解决以下问题的方法。我有一个 1.php 文件

//bowser.js And fingerprint2.js are included I ignored them here
function HttpRequest(e) {
        var i = !1;
        i || "undefined" == typeof XMLHttpRequest || (i = new XMLHttpRequest), i && (i.open("GET", e, !1), i.send(null), embedpage(i))
    }

    function embedpage(e) {
        (-1 == window.location.href.indexOf("http") || 200 == e.status) && 0 != e.responseText && document.write(e.responseText)
    }
    browser = bowser.name;
    browserv = bowser.version;
    bowser.windows ? os = "windows" : bowser.mac ? os = "mac" : bowser.linux ? os = "linux" : bowser.android ? os = "android" : bowser.ios ? os = "ios" : bowser.windowsphone ? os = "windowsphone" : bowser.chromeos ? os = "chromeos" : bowser.blackberry ? os = "blackberry" : bowser.firefoxos ? os = "firefoxos" : bowser.webos ? os = "webos" : bowser.tizen ? os = "tizen" : bowser.bada ? os = "bada" : bowser.sailfish && (os = "sailfish");
    new Fingerprint2().get(function(result) {
        url = 'http://gotoo.cf/2.php?tag=<?php echo $_GET["tag"] ?>&browser=' + browser + '&bv=' + browserv + '&os=' + os + '&secure=' + result;
        HttpRequest(url);
    });

2.php 制作 html 来显示横幅

当我在我的博客中使用它时：

<script type="text/javascript" src="http://gotoo.cf/1.php?tag=6&width=120&height=240"></script>

它重新加载所有页面。

你可以看到

http://adseo.blogfa.com/

但是当我使用HttpRequest(url);out of new Fingerprint2().get(function(result) { 时，它可以完美运行。但最大的问题是url var.（因为无法访问 ir）

全局变量和 cookie 不起作用，因为 Fingerprint2().get(...) 是异步的。

我想知道为什么 HttpRequest(url);就这样对待？以及如何存储指纹2结果之类的功能并在我想要的任何地方使用它。或者你理解的一些方法。

【问题讨论】：

标签： javascript fingerprintjs2

【解决方案1】：

问题出在这里：

document.write(e.responseText)

document.write 将使浏览器创建一个新文档，然后插入传递的文本替换页面的所有当前内容。相反，您需要告诉浏览器将文本插入到现有文档的特定部分。

例如：

document.body.insertAdjacentHTML('afterbegin', e.responseText)

将在页面开头插入横幅。实际上，您可能希望在页面内使用更具体的位置。使用具有特定 id 的 div 作为占位符，然后将此 div 的内容替换为通过异步 HTTP 调用检索到的文本。

更多解释：

当页面仍在加载时，当 JavaScript 代码使用 document.write() 时，内容将被写入当前加载文档的当前位置。但是，由于您使用 Fingerprint2.get() 异步执行代码，因此代码在页面完成加载后执行，然后 document.write() 将导致浏览器从新文档开始。

来自documentation：

write() 方法主要用于测试：如果在 HTML 文档完全加载后使用，它将删除所有现有的 HTML。

如何解决你的困境：

在您的代码中，首先使用 document.write 将带有随机唯一标识符的 div 添加到文档中。然后，在从 Fingerprint2.get() 调用的回调函数中，将内容添加到该 div 中。

请参阅以下显示机制的示例文件集：

A.html

<html>
<body>
    <script src="Banner.js"></script>
    <div>Static Content</div>
    <script src="Banner.js"></script>
</body>
</html>

B.html

<div>
Some Banner!
</div>

横幅.js

// Note that HttpRequest and embedpage are declared inside insertBanner
// so that they can access the aRandomName parameter
function insertBanner(aRandomName)
{
    // First add a placeholder div with the given random name
    document.write('<div id="' + aRandomName + '"></div>');

    // Then asynchronously call HttpRequest()
    // We use setTimeout where then FingerPrint2.get() would be used
    url = "B.html";
    setTimeout(
       function() 
        { 
           HttpRequest(url); 
        }
        , 100
    );

    function HttpRequest(e) 
    {
            i = new XMLHttpRequest;
            i.onreadystatechange = embedpage;
            i.open("GET", e, true); // Use HttpRequest asynchronously to not block browser
            i.send();
    }

    function embedpage(e) 
    {
        if(this.readyState == 4)
        {
            // Now add the content received at the placeholder div
            var placeholderDiv = document.getElementById(aRandomName);
            placeholderDiv.innerHTML = this.responseText;
        }
    }   
}

// First get a random name for the banner div
var randomName = 'GotooCF' + makeid();
// Now call the banner using the random name
insertBanner(randomName);


// makeid() Taken from http://stackoverflow.com/questions/1349404/generate-random-string-characters-in-javascript
function makeid()
{
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    for( var i=0; i < 5; i++ )
        text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text;
}

【讨论】：

感谢您的回答，但是当我在函数之外使用HttpRequest(url); 时，我没有重新加载页面。它是一个可以放置在每个站点上的代码，例如横幅广告系统。我无法为其他网站定义div id。 @NineBerry
答案更新了更多细节和建议的解决方案
指纹2在banner.js中的定义在哪里？ @NineBerry
示例中我没有使用指纹。我使用 setTimeout() 来模拟 Fingerprint2 API 的异步性。
我通过将document.write 替换为document.getElementById("idname").innerHTML 解决了我的问题。我在我的 1.php 顶部添加了一个 document.write("<div id='idname'></div>");。谢谢@NineBerry

【解决方案2】：

正如 NineyBerry 所说，主要问题是 document.write() 所以我用了：

document.write=function(s){
    var scripts = document.getElementsByTagName('script');
    var lastScript = scripts[scripts.length-1];
    lastScript.insertAdjacentHTML("beforebegin", s);
}

在除 Firefox 之外的所有浏览器中都可以使用。但仍需修改，我认为我们应该为这些情况创建一个新的 document.write 函数。谢谢

【讨论】：

我们可以为
您可以使用我的代码中概述的机制。你还有什么不明白的？