How to get a DIV element from an external webpage in HTML file?

Question

Apologies in advance if this question has been asked earlier. I did find some similar questions on web but I couldn't figure out the answer still. You can say I have never dealt with anything beyond basic HTML. So any help would be appreciated.

I have a HTML file (Say text.html) only for personal use. In the file, there will be an input box for entering text and a submit button. I want that if I clicks on submit, it opens a particular hyperlink from an external webpage based on the input text. I guess it's like "I am feeling Lucky" of Google.

Example: If the user enters "Test" and clicks on Submit, it should open the second result from the page "https://www.google.com/search?q=test"

Here is my HTML:

<!DOCTYPE html>
<html>
<body style="background-color:beige">
  <h1 style="text-align:center"><font size="14">Test</font></h1>
<style type="text/css">
</style>
<form id="form">
<div align="center" style="vertical-align:bottom">
       <input type="text" 
        value="Test" 
        id="input" 
        style="height:50px;width:200px;font-size:14pt;"> 
</div>
</form>
<TABLE BORDER="0">
<TD><button class="button" id="button01">SUBMIT</button></TD>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){

    $('#button01').click(function(e) {
        var inputvalue = $("#input").val();
        window.open("https://www.google.com/search?q="+inputvalue);
    });
</script>

Also, here is the example of the div element from the page on which the hyperlink I want to open is on:

<div id="XYZ" class="contentEditValue" style="float:left;width:180px;">
<a href="2nd result link from google search" target="_self" title="2nd result">2nd Result</a>               
</div>

I have read that it can be achieved with PHP or Jquery and all but they are not something I have ever worked on. Thank you very much in advance for any help!

Appreciate any other alternatives as well.

At what point is your isolated issue with your code? Seems Too Broad to me. — mickmackusa, May 06 '18 at 08:21
@mickmackusa Hello, I am not encountering an issue with the code.The code I have mentioned works fine and just allows me to open a webpage using input as one of the parameters, which is far from what I exactly want. I have no idea how to achieve what I want with the code. Any help in that regards? — Alice314, May 07 '18 at 16:52
Sorry, I still believe that thid is a bit Too Broad for the type of questions that are expected here. Please continue to research and develop your idea — mickmackusa, May 07 '18 at 20:17

score 1 · Answer 1 · edited May 06 '18 at 10:04

1

You have are missing a }); to close the ready() function

<script type="text/javascript">
    $(document).ready(function(){

        $('#button01').click(function(e) {
            var inputvalue = $("#input").val();
            window.open("https://www.google.com/search?q="+inputvalue);
        });
    });
</script>

edited May 06 '18 at 10:04

AA Shakil

538
4
14

answered May 06 '18 at 08:25

Toshio Minei

76
1
7

score 1 · Answer 2 · answered May 06 '18 at 08:25

You shouldn't be able to do that because of security. If that (reading content from iframes, other browser windows...) would be possible, an attacker could add JS keylogger to your internet banking login or read your messages on Facebook. CORS (https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) is used to block these requests and if the website doesn't say explicitly that you are allowed to do something with its content, most browsers won't allow you that.

score 0 · Answer 3 · answered May 08 '18 at 17:01

Here's a basic example of how to do this in PHP.

Taking JavaScript/JQuery out of the picture, let's just say you have a basic form:

<form>
    <input type="text" value="Test" name="input">
    <input type="submit">
</form>

Without specifying action or method attributes on the <form> tag, the form will make an HTTP GET request to the URL of the page it is on, so for this example the PHP code will be on the same page as the form. Here's a more detailed description of sending form data if you're interested.

Now that you have a way to pass the input to the PHP script*, there are three basic parts to this problem.

Make a request to the page you want with a query string including your input

http_build_query is an easy way to construct a properly encoded query string to use with your request. For this example we'll use file_get_contents to make the request. There are other ways to do it, including cURL, but let's keep it simple.
```
$query = http_build_query(['q' => $_GET['input']]);
$page = file_get_contents('http://www.example.com/?' . $query);
```
I'm not using Google for this example because it's a bit more complicated to find the right links in the response and follow them. (Partially because they don't really want you to do it that way.)
Find the link you want in the response

Don't try to find the link in the response with regex. You'll have problems with it, come back to Stack Overflow to try to solve them, and people will tell you that you shouldn't be using regex, so just skip that part and use a DOM parser.
```
$doc = new DomDocument;
$doc->loadHTML($page);
$links = $doc->getElementsByTagName('a');
$url = $links[0]->getAttribute('href');
```
I used getElementsByTagName() to find links, but if the page is more complex an xpath query will work better. Also, I used the first link ($links[0]) because example.com only has one link. $links[1] would get you the second link if it existed.
Follow the link
```
header("Location: $url");
exit;
```

If everything goes well, you'll end up where you want to be. But there are a lot of things that can go wrong. If you're requesting a resource that you have no control over, it can change at any time without any advance warning to you, so your code that finds the link may stop working. You may get blocked from making requests. Scraping links from sites like this violates the terms of service on many sites, so check that out beforehand. You may find that the site offers a web API, which should be a much better way to access its content than this.

_{*You don't really need a form for this; you can just pass the input parameter in the URL to your page.}

How to get a DIV element from an external webpage in HTML file?

3 Answers3