Getting document.title from .html file using JS/jQuery/Ajax?

Question

I have index page (menu) for navigating between other .html pages in the same directory.

Structure looks like:

index.html
000001.html
000002.html
000003.html
000004.html
...
header.html  
bottom.html  
000001
   SomeFile.png
   ...
000002
   SomeFile.zip
   ...
...

And I need to get document.title from all of this ******.html files in index.html.

UPD: Forgot to include other files and folders in e.g., sorry.

Do you need to get the titles from every page at once? Or just the current page? document.title is the correct code for retrieving page title. — oompahlumpa, Mar 02 '17 at 20:50
How many of these files are there, and how big are they? Because if you think about it, you're going to have to load each of those files into memory, get the `title` element, then get the next one, etc.. There's a potential for a lot of network traffic... — Heretic Monkey, Mar 02 '17 at 22:44
Agree with @Mike — I would collect the titles one-time as a build or deployment step, not dynamically _every single time_ the index page is requested. — Stephen P, Mar 02 '17 at 23:22

Aundy · Answer 1 · 2017-03-03T00:05:35.067

0

Below code gets the title from HTMLs

$(document).ready(function () {
    var files = ['000001.html', '000002.html', '000003.html'];

        for (i = 0; i <= files.length; i++) {
            jQuery.get(files[i], function (data) {

                var htmlstr = $.parseHTML(data);
                //alert($(htmlstr).filter('title')[0].text);
               $('#test').append($(htmlstr).filter('title')[0].text);
            });
        }
});

<div id="test"></div>

edited Mar 03 '17 at 00:05

answered Mar 02 '17 at 21:23

Aundy

66
5

Thanks, then I need to print them all, in turn, each in to different div. How I can do it? – DIES Mar 02 '17 at 22:20
Just replace alert statement with append like below $(YOURJQUERYSELECTOR).append($(htmlstr).filter('title')[0].text);
– Aundy Mar 03 '17 at 00:04

score 0 · Answer 2 · edited May 23 '17 at 12:17

Check out jQuery `.load()`

You can populate a page with the titles from each other page using something like:

$(function(){
  var numberOfHtmlDocs = 10; // this will search through 000001.html ... 000010.html
  var numberFormat = function(number, width) { // useful for padding numbers with 0's
    return new Array(width + 1 - (number + '').length).join('0') + number;
  }

  for(i = 1; i <= numberOfHtmlDocs; i++) { // loop through for each document
    var paddedInt = numberFormat(i, 6); // change '1' to '000001', etc.
    $('body').append('<h3></h3>'); // Add a container to put the value in
    $('h3:last-child').load(paddedInt + '.html title'); // Set the text of the container that was just added to be the value of the title
  }
});

Much thanks to alex's answer to this question.

Getting document.title from .html file using JS/jQuery/Ajax?

2 Answers2

Check out jQuery .load()

Check out jQuery `.load()`