Когда я использую новый XMLHttpRequest в функции все страницы перезагрузить
Я пытаюсь неделю найти способ решения следующей проблемы. У меня есть файл 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>
это перезагрузить всю страницу.
вы можете увидеть там
но когда я использую HttpRequest(url);
снаружи new Fingerprint2().get(function(result) {
это работает отлично. но большая проблема url
var.(потому что ir не может быть доступен вне функции)
global var и cookie не работают, потому что Fingerprint2().get(...) является асинхронным.
Я хочу знать, почему HttpRequest(URL); так относиться? и как сохранить результат fingerprint2 как функцию и использовать ее там, где я хочу. Или какой-то метод, который вы понимаете.
2 ответа
Проблема заключается в следующем:
document.write(e.responseText)
document.write
заставит браузер создать новый документ и затем вставить пропущенный текст, заменяя все текущее содержимое страницы. Вместо этого вы должны указать браузеру вставить текст в определенную часть уже существующего документа.
Например:
document.body.insertAdjacentHTML('afterbegin', e.responseText)
вставит баннер в начале страницы. В действительности вы хотели бы использовать более конкретное место внутри страницы. Используйте div с определенным идентификатором в качестве заполнителя, а затем замените содержимое этого div текстом, полученным с помощью асинхронного HTTP-вызова.
Еще несколько объяснений:
Когда код JavaScript использует document.write(), когда страница все еще загружается, содержимое будет записано в текущей позиции загруженного в данный момент документа. Однако, поскольку вы выполняете свой код асинхронно с помощью Fingerprint2.get(), код выполняется после того, как страница закончила загрузку, и document.write() приведет к тому, что браузер начнет работу с новым документом.
Из документации:
Метод write() в основном используется для тестирования: если он используется после полной загрузки документа HTML, он удалит весь существующий HTML.
Как решить вашу дилемму:
В своем коде сначала добавьте в документ div со случайным уникальным идентификатором, используя document.write. Затем в функцию обратного вызова, которая вызывается из 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>
Banner.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://stackru.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;
}
Как сказал 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 для этих ситуаций. Спасибо