Загрузка файла в innerHTML div, но javascript в файле не работает - PullRequest
Новая
       1

Загрузка файла в innerHTML div, но javascript в файле не работает

0 голосов
/ 19 октября 2011

Я загружаю файл .php в созданный мной div.Я могу успешно загрузить файл в div, и все работает, кроме JavaScript.Когда я проверяю файл в своем браузере, JavaScript работает, но не тогда, когда он вставляется в мой div.

index.php 

<?php
$filename = $_GET["filename"];  
if($filename != ""){        
    $fileData = file_get_contents($filename);
    $fileData = trim($fileData);
    $fileData = str_replace("\n", "", $fileData);
    $fileData = str_replace("\r", "", $fileData);
    echo $fileData;
    die;
}?>

<body>
<script>
function LoadFile(filename, javascriptDiv){
    if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else{// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function(){
        if(xmlhttp.readyState==4 && xmlhttp.status==200){
            javascriptDiv.innerHTML = xmlhttp.responseText;
        }
    }

    xmlhttp.open("GET","index.php?filename="+filename,true);
    xmlhttp.send();
}

var javascriptDiv = document.createElement('div');
javascriptDiv.setAttribute('id', 'javascriptDiv');
javascriptDiv.style.position = 'absolute';  
javascriptDiv.style.top = 50;
javascriptDiv.style.left = 50;
javascriptDiv.style.height = 200;
javascriptDiv.style.width = 300;
javascriptDiv.style.background = '#CCCCCC'; //so we can see that the DIV was created

LoadFile('http://127.0.0.1/Debug/test.php', javascriptDiv);

document.body.appendChild(javascriptDiv); //Display the Window
</script>
</body>

test.php <- файл, который я загружаю в div </p> 

Plain text works
<?php echo "<br>php works <br>"; ?>
<a>html works</a><br>

<script>
function Test(){
    alert('javascript works');
}
</script>

<input type="button" value="Test Javascript" onclick="Test()"/>

Вот как это выглядит на моем сайте. index.php

А вот прямая ссылка на файл test.php test.php

Мне нужно, чтобы это работало без изменения теста.php файл.

Ответы [ 4 ]

0 голосов
/ 17 мая 2012

Добавьте любой HTML-тег с отображаемым тегом, который не создается с помощью document.createElement, или создайте скрытый тег и сначала добавьте его в свой файл.

Примерно так: 

 var d = document.createElement("hidden");
 div.innerHTML = d + content;

Это будетотлично работает, я проверял.

0 голосов
/ 19 октября 2011

Я думаю, что вы можете определить функцию Test в родительском документе или просто так: 

<input type="button" value="Test Javascript" onclick="alert('javascript works');"/>

В вашем дочернем документе.

0 голосов
/ 19 октября 2011

Нет, вы не можете оценить теги с отложенной загрузкой.

Вообще говоря, я думаю, что идея разрешить пользователям запускать пользовательский javascript - это дверь, открытая для эксплойтов. Я не знаю точно, чего вы пытаетесь достичь и почему, но вам лучше создать набор функций самостоятельно и опубликовать простой публичный API (например, чтобы получить лайтбокс, добавьте класс 'лайтбокс' к своему элементу). или тому подобное).

Кроме того, вы можете извлечь содержимое тега и запустить eval (). Но опять же, это опасно.

Эта страница довольно хорошо объясняет различные методы, которые вы можете использовать для достижения этой цели. Конечно, все предполагают, что вы используете свой собственный код, а не какой-то пользовательский код.

0 голосов
/ 19 октября 2011

Когда вы извлекаете контент из AJAX, браузер должен проанализировать, включать или нет какие-либо теги сценариев, которые вы включаете [По моему опыту, это очень редко происходит]

Вместо того, чтобы извлекать открытый текст / HTML сAJAX, я бы порекомендовал получить информацию в кодировке JSON, а затем правильно проанализировать возвращенный JSON, например,

new test.php 

$html=<<<EOT
<input type="button" value="Test Javascript" onclick="Test()"/>
EOT;
$js=<<<EOT
function Test(){
    alert('javascript works');
}
EOT;
echo json_encode(array('html'=>$html,'js'=>$js));

новая функция readystatechange 

xmlhttp.onreadystatechange=function(){
    if(xmlhttp.readyState==4 && xmlhttp.status==200){
     try{
        respJSON = new Object(xmlhttp.responseText);
        javascriptDiv.innerHTML=respJSON.html;
        eval(respJSON.js);
     }catch (e){
        //!!!
     }
    }
}
...