Reading HTML header info of files via JS

Question

I have a product list that is generated by asp I have product description for each product in a html file

each html file is named: <product.id>.html<br/>
html file size is only 1-3 kb

Within the html file is <title> and <meta name="description" content="..." />
I want to access these in an efficient way so that I can output this as e.g.:

document.write(<product.id>.html.title);<br/>
document.write(<product.id>.html.description);

I have a working solution for the individual product, where I use the description file - but hope to find a more efficient / simple approach. Preferably, I want to avoid having 30+ hidden iframes - google might think that I am trying to tamper with search result and blacklist my page...

Current code:

<iframe src="myfile.html" id="product" style="display:none">&nbsp;</iframe>
<script type="text/javascript">
   document.getElementById('product').onload = function(){
   var d = window.frames[frame].document;
   var title = d.title : ' ';
   var keywords = d.getElementsByName('keywords')[0].getAttribute('content', 0) : ' ';
   var descript = d.getElementsByName('description')[0].getAttribute('content', 0) : ' ';
  }
</script>

Your code does not close the open `function(){` – Armin Nov 22 '12 at 11:10 — Armin, Nov 22 '12 at 11:10

score 1 · Answer 1 · edited May 23 '17 at 11:56

As mentioned here on another Stack Overflow question, you could use:

document.title = "This is the new page title.";

and looking here gives us :

document.getElementsByTagName('meta').content = "New content here";

or:

document.getElementsByTagName('meta').name = "NewName";

With these, you should be able to read and write your tags as needed, I've only used a few examples here, there's surely more.

Armin · Answer 2 · 2012-11-22T14:04:29.743

0

You could load your files with AJAX. For example (using jQuery):

$.get('myfile.html', function(data){
   var title = $(data).find('head title').text();
   var keywords = $(data).find('head meta[name="keywords"]').attr('content');
   var descript = $(data).find('head meta[name="description"]').attr('content');
});

Here you find the jQuery documentation about using jQuery.get

edited Nov 22 '12 at 14:04

answered Nov 22 '12 at 11:14

Armin

13,674
9
43
60

I have tried to add this: `` But without any success... any ideas? – Morten Repsdorph Husfeldt Nov 22 '12 at 13:52
What is ``? – Armin Nov 22 '12 at 14:03
The `` just inserts product.id - on the server side the current script is: `` – Morten Repsdorph Husfeldt Nov 22 '12 at 14:04
Well... this does not answers my question. – Armin Nov 22 '12 at 14:05
Sorry: The just inserts product.id - on the server side – Morten Repsdorph Husfeldt Nov 22 '12 at 14:06
And what is not working? Does the ajax request fail? Or is `data` in callback method empty? – Armin Nov 22 '12 at 14:41

score 0 · Accepted Answer · answered Nov 23 '12 at 09:35

Found this solution:

<script>
  var xhr = $.ajax({ 
  type: "GET", 
  url: "/files/billeder/ecom/beskrivelser/<!--@Ecom:Group.Number-->.html", 
  success: function(msg){
    msg = msg.split('content="')[1];
    msg = msg.split('"')[0];
    document.getElementById("a_<!--@Ecom:Group.Number-->").innerHTML = "<p>" + msg + "</p>";

Not yet very elegant... but it works...

Reading HTML header info of files via JS

3 Answers3