How to load HTML file using Javascript?

Asked

Viewed 46 times

1

I have a file HTML which I want to count all tags a existing. I have already been able to develop the script that does this count using Local Storage.

My goal is:

  • When loading the page index.html, the script go in the other file html that I want and count the tags.

  • Let this count be displayed in a td in the index.html

Here follows the counting script and Local Storage:

var linkCount = document.body.querySelectorAll('a').length,
hrefs = document.body.querySelectorAll('a[href]');

localStorage.setItem("links", linkCount);

document.getElementById("total").innerHTML = localStorage.getItem("links");

The above script is only running locally, i.e., where his is done.

I imagine there is a way to call the file I want in the execution of this script, but I can’t find.

I hope I have been as clear as possible and I can complement if I get confused. Thank you already!

javascript

1 answer

0

One option is you make a call on this "another HTML file" via AJAX and later treat as you already do, but with minor changes. See this example:

index.html:

<table>
    <tbody>
        <tr>
            <td>Resposta na td abaixo:</td>
        </tr>
        <tr>
            <td id="alvo"></td>
        </tr>
    </tbody>
</table>

<script>
    var ajax = new XMLHttpRequest();
    ajax.onreadystatechange = function(){
        if (ajax.readyState === 4) {
            if (ajax.status === 200) {

                // https://stackoverflow.com/a/20583524/5988245
                let ajaxDocument = (
                    document.implementation
                    .createHTMLDocument().documentElement
                );
                ajaxDocument.innerHTML = ajax.responseText;

                /* Seu tratamento:
                 * var linkCount = document.body.querySelectorAll('a').length,
                 * hrefs = document.body.querySelectorAll('a[href]');
                 **************************************************************/

                 // Como fica:
                let linkCount = ajaxDocument.querySelectorAll('a').length,
                hrefs = ajaxDocument.querySelectorAll('a[href]');

                // Popular na td:
                document.getElementById('alvo')
                .innerText = 'linkCount: '+linkCount;

                // debug:
                console.log(linkCount);
                console.log(hrefs);

            } else {
                // debug:
                console.log(ajax);
                alert('Erro na requisição.');
            }
        }
    }
    ajax.open('get', 'outroarquivo.html');
    ajax.send();
</script>

In this example, I used outroarquivo.html with 6 links:

<!-- ... -->
<body>
    <a href="#">Lorem ipsum</a>
    <a href="#">Lorem ipsum</a>
    <a href="#">Lorem ipsum</a>
    <a href="#">Lorem ipsum</a>
    <a href="#">Lorem ipsum</a>
    <a href="#">Lorem ipsum</a>
</body>
<!-- ... -->

And that was the result:

Print do resultado

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.