将输入传递到PhantomJS JS文件

时间:2019-04-09 23:23:59

标签: javascript php html forms phantomjs

我正在尝试使用PhantomJS创建一个简单的应用程序。所需的功能如下:

1.在输入栏中输入网站链接
2.点击提交
3.提供了链接页面的屏幕截图

我已经设置了所有代码,我遇到的唯一问题是将链接数据从输入传递到JS文件。请参阅下面的代码:

HTML :(仅表单,输入栏和按钮)

<html>

 <head>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">    </script>

  <script type="text/javascript" src="./bin/pageCapture.js"></script>

 </head>

 <body>


  <form id="form" method="post" action="screenshot.php">

    <input type="text" name="sitelink" id="sitelink" placeholder="Enter Link">
   <br>

   <div class="display1">
     <button class="button1" id="button" onmouseover="changeColor()" onmouseout="colorBack()">Submit</button>
   </div>
  </form>

 </body>



</html>

PHP :(用于提交表单)

<html>

 <?php

  $sitelink = $_POST['sitelink'];

  $cmd = ' ./bin/phantomjs';
  $cmd.= ' ./bin/pageCapture.js';

  putenv('PATH=./bin/');

  exec($cmd.' 2>&1', $output);

   $imagelink = 'screenCapture1.jpeg';

 ?>

 <h2 style="text-align: center;">Your screenshot:</h2>
 <img class="screenshot" src=<?php echo $imagelink ?>>

</html>

JS文件(PhantomJS代码)

var url = document.getElementById('sitelink').value;

var webpage = require('webpage');

var page = webpage.create();



page.open(url, function(status) {
  console.log(page['objectName']);
  console.log(page['title']);
  console.log(page['url']);


console.log("Status: " + status);
  if(status === "success") {
   page.render('screenCapture1.jpeg', {format: 'jpeg', quality: '100'});
  }

phantom.exit();
});

您可以说我正在使用var url = document.getElementById('sitelink').value;来尝试获取输入数据(链接)并通过JS文件运行它。目前不适用于我。任何帮助表示赞赏。谢谢!

0 个答案:

没有答案