如何创建一个新的.html网页onclick?

时间:2015-09-03 15:12:01

标签: javascript php html server server-side

我想要做的是当用户点击我的html按钮时,我想在服务器上动态创建一个新的网页。我需要新网页的网址才能拥有自己的网址,也就是说,它应该是彼此不同的。

更详细:当用户点击按钮时,我想将新的.html文件上传到服务器。例如,如果我有一个名为www.check.com/index.html的网站,当用户点击index.html中的按钮时,我需要创建一个包含一些html行的新.html(但没有CSS,没有什么是显示在页面上)。因此,当用户点击按钮时,我希望使用像www.check / 1.html这样的唯一网址将文件上传到服务器,第二次是check.com/2.html等等。我很好,因为它是1.html,2.html等等。

Javascript代码:

 function makePage(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200)
    alert("webpage " + xmlhttp.responseText + " was successfully created!");
}
var content = "<html><head></head><body><meta name=\"twitter:card\" content=\"summary_large_image\"><meta name=\"twitter:site\" content=\"@nytimes\"><meta name=\"twitter:creator\" content=\"@SarahMaslinNir\"><meta name=\"twitter:title\" content=\"Parade of Fans for Houston’s Funeral\"><meta name=\"twitter:description\" content=\"Blah Blah Blah content.\"><meta name=\"twitter:image\" content=\"\"><script>document.getElementById(\"imgTweet\").innerHTML.write(img);</script></body></html>";
xmlhttp.open("GET","makePage.php?content=" + content,true);
xmlhttp.send();}

'img'是我的不同页面中的变量。由代码创建的网页不会被执行。

1 个答案:

答案 0 :(得分:3)

您必须使用AJAX来执行php。使用file_put_contents()在php中创建新文件非常简单。

这是一个例子:
makePage.html:

    <html>
    <body>
    <button onclick="makePage()">click</button>
    <script src="makePage.js">
    </script>
    </body>
    </html>

makePage.php:

<?php
$content = $_GET["content"];
$file = uniqid() . ".html";
file_put_contents($file, $content);
echo $file;
?>

makePage.js

function makePage(){
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function(){
    if(xmlhttp.readyState==4 && xmlhttp.status==200)
        alert("webpage " + xmlhttp.responseText + " was successfully created!");
    }
    var content = "<html><head><meta charset=\"utf-8\" /> </head><body>new website<script>alert(\"test\")</script></body></html>";
    xmlhttp.open("GET","makePage.php?content=" + content,true);
    xmlhttp.send();
}

希望这会有所帮助