Handling meta data with Javascript - javascript

I am trying to read meta data from an html page using JavaScript. I created an array of all the meta tags and I am trying to read the property field, but I cant seem to get it to work. Here is the console:
>meta[6]
<meta property=​"og:​image" content=​"http:​/​/​www. example.com/img/1.png">​
>meta[6].property
undefined
>meta[6].content
"http:​/​/​www. example.com/img/1.png"
How am I able to access the content but not the property field and how can I get the property?

To answer the question:
"How am I able to access the content
but not the property field"
content is a standard attribute of the HTML meta element, so browsers will create an equivalent DOM property for the related DOM meta element.
property is not a standard attribute for the HTML meta element, so some browsers will not create a similar property (e.g. Firefox), while other browsers (e.g. IE) will. Therefore getAttribute should be used for any non-standard attribute value, but direct DOM property access should be used for the values of standard attributes.
As a general rule, you should not use non-standard attributes on HTML elements, then you can always access values using DOM properties (which is the most appropriate method for HTML DOM elements).
Note that the HTML5 meta element is the same as the HTML 4.01 element linked to above, however the HTML 4 spec is probably the better one to use on the general web for the time being. HTML5-specific code should really only be used when targetting the HTML5 features of a particular browser.

Here is a complete working example..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Cross-Window HTML</title>
<meta property="og:title" content="Share Title" />
<meta property="og:description" content="Share Page Description" />
<meta property="og:image" content="Path to Share Image" />
<link rel="canonical" href="http://127.0.0.1/newWindowWrite.html" />
<script type="text/javascript">
function GetMetaValue(meta_name) {
var my_arr = document.getElementsByTagName("meta");
for (var counter = 0; counter < my_arr.length; counter++) {
console.log(my_arr[counter].getAttribute('property'));
if (my_arr[counter].getAttribute('property') == meta_name) {
return my_arr[counter].content;
}
}
return "N/A";
}
function newHTML() {
HTMLstring = '<html>\n';
HTMLstring += '<head>\n';
HTMLstring += '<title>Google +1</title>\n';
HTMLstring += '<meta property="og:title" content="' + GetMetaValue('og:title') + '"/>\n';
HTMLstring += '<meta property="og:description" content="' + GetMetaValue('og:description') + '"/>\n';
HTMLstring += '<meta property="og:image" content="' + GetMetaValue('og:image') + '"/>\n';
HTMLstring += '<link rel="canonical" href="' + location.href + '"/>\n';
HTMLstring += '</head>\n';
HTMLstring += '<body>\n';
HTMLstring += '<div id="shareContent">\n';
HTMLstring += '</div>\n';
HTMLstring += '</body>\n';
HTMLstring += '</html>';
console.log(HTMLstring);
newwindow = window.open();
newdocument = newwindow.document;
newdocument.write(HTMLstring);
newdocument.close();
}
</script>
</head>
<body>
<div onclick="newHTML();">Spawn Sharing Window</div>
</body>
</html>

you want the getAttribute function:
>meta[6].getAttribute('property');
"og:image"

Related

Having trouble parsing json file in my javascript..but I am getting "responseObject.weather[i].weatherresponseObject.weather[i].description"

Trying to parse data from a php file which is in json format to an html file using javascript to do so
I am getting responseObject.weather[i].weatherresponseObject.weather[i].description but I have a hunch its how the php file is formatted and perhaps the object I am using is not correct
I am trying to just pull the temperature and the description onto my html page.
Can someone give me a idea of where it is going wrong?
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css">
<script src="run.js"></script>
<title>Ajax Demo</title>
</head>
<body>
<h1 class="title">Todays Weather Forecast</h1>
<p class="sub">Click the button the check the local weather.</p>
<button class="demo-centered" type="button" onclick="loadPhp()">Check Weather</button><br><br>
<div id="content"></p>
</body>
</html>
function loadPhp() {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
if (xhr.status === 200) {
responseObject = JSON.parse(xhr.responseText);
var newContent = '';
for (var i = 0; i < responseObject.weather.length; i++){
newContent += 'responseObject.weather[i].weather';
newContent += 'responseObject.weather[i].description';
}
document.getElementById('content').innerHTML = newContent;
}
};
xhr.open('GET', 'demo.php', true);
xhr.send(null);
}
{"coord":{"lon":-116.8,"lat":33.03},"weather":[{"id":802,"main":"Clouds","description":"scattered clouds","icon":"03d"}],"base":"stations","main":{"temp":293.73,"feels_like":289.89,"temp_min":289.26,"temp_max":295.93,"pressure":1016,"humidity":52},"visibility":16093,"wind":{"speed":5.7,"deg":260},"clouds":{"all":40},"dt":1589408840,"sys":{"type":1,"id":5686,"country":"US","sunrise":1589374130,"sunset":1589423903},"timezone":-25200,"id":5391832,"name":"San Diego County","cod":200}
You don't want the quotes in this code:
newContent += 'responseObject.weather[i].weather';
newContent += 'responseObject.weather[i].description';
With the quotes, you're making those literal strings. Instead:
newContent += responseObject.weather[i].weather;
newContent += responseObject.weather[i].description;
...though you probably want some markup around those, as they'll just be stuck together.
Three other things worth noting:
You never do anything with newContent. You need to do something to put it on the page (append elements with it, append it to existing elements, etc.).
Your code is falling prey to what I call The Horror of Implicit Globals — you need to declare responseObject.
It's fine to use XMLHttpRequest, but you might also look at the newer fetch instead. If you do, though, beware the fetch footgun.

document.creatElement can't show utf8 chars

I create label elem with document.crteateElement and I set text value to elem with .innerHTML but on page browser don't show utf-8 characters correct I see only '?' in black rectangle.
This my hrml charset:
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-9">
<META HTTP-EQUIV="Content-language" CONTENT="tr">
I use this function for convert :
GetChar(char) {
return unescape(decodeURIComponent(char))
}
and this is my value
const target= '${this.GetChar('İ')}stikamet'
then here is I set value to label elem
var elem = document.createElement('label)
elem.innerHTML = target
What is the corrent way show this characters on browser ?
Try this instead of your current meta-tags
<meta charset="UTF-8">
EDIT:
The following HTML displays your example-char fine for me:
<html>
<meta charset="UTF-8">
<body>
<label>İ</label>
</body>
</html>

Displaying multiple user outputs using JavaScript

I am trying to display multiple user outputs, so that when something is entered in the text field, it is captured and displayed in the div.
At the moment it keeps overwriting with the new result rather than adding to what is already displayed.
Can anyone help with this?
HTML:
<!DOCTYPE HTML>
<html lang="en">
<!-- more meta data needs to go in here -->
<head>
<script type="text/javascript" src="main_app_javascript.js"></script>
<link rel="stylesheet" type="text/css" href="">
<meta charset="UTF-8">
<title>List Check</title>
</head>
<body>
<input type="text" id="enter_box">
<button onclick="output_function()"> Add To List </button>
<div id="list_output"></div>
</body>
JavaScript:
function output_function() {
var user_input = document.getElementById("enter_box").value;
document.getElementById("list_output").innerHTML = user_input;
}
Do
document.getElementById("list_output").innerHTML += user_input + '<br />';
instead.
This will concatenate your value and add a line break at the end of the text, to create a "list". Notice the =+ and + '<br /> differences.
You could also try this
function output_function() {
'use strict';
var user_input = document.getElementById("enter_box").value;
var list_output = document.getElementById("list_output");
if( list_output.innerHTML === '' ) {
list_output.innerHTML = '<p>' + user_input + '</p>';
} else {
list_output.innerHTML += '<p>' + user_input + '</p>';
}
}

Regular Expression to select part in HTML

I have requirement to extract meta property from scrolled HTML source code. After scrolling HTML code contains as follows
Example:
<meta property="og:site_name" content="asasasas">
<meta property="og:title" content="asajhskajhsaksp;" />
<meta property="og:image" content="images.cxs.com/2014/09/modit1.gif?w=209" />
Here I want to get the content of only where meta property="og:image" ie result should be only
images.cxs.com/2014/09/modit1.gif?w=209
was it so difficult to use jquery
$('meta[property="og:image"]').attr('content')
As #Biffen said, don't use regex to parse html.
If you have the said string in a variable you can use querySelector() like
var html = '<meta property="og:site_name" content="asasasas" /><meta property="og:title" content="asajhskajhsaksp;" /><meta property="og:image" content="images.cxs.com/2014/09/modit1.gif?w=209" />';
var el = document.createElement('div');
el.innerHTML = html;
var meta = el.querySelector('meta[property="og:image"]');
console.log(meta.content);
document.getElementById('result').innerHTML = meta.content;
<div id="result"></div>
If it is part of the current page then
var meta = document.querySelector('meta[property="og:image"]');
console.log(meta.content);
document.getElementById('result').innerHTML = meta.content;
<meta property="og:site_name" content="asasasas"/>
<meta property="og:title" content="asajhskajhsaksp;" />
<meta property="og:image" content="images.cxs.com/2014/09/modit1.gif?w=209" />
<div id="result"></div>
You can use the approach suggested by Arun, however there may be user agents that don't support the Selectors API or don't support the required features (e.g. IE8). In that case, you can use getElementsByTagName and a plain old for loop.
var node, nodes = document.getElementsByTagName('meta');
for (var i=0, iLen=nodes.length; i<iLen; i++) {
node = nodes[i];
if (node.getAttribute('property') == 'og:image') {
// do something with content
console.log(node.content);
}
}
the above will work in any browser in use and doesn't require any external library.

Get the image from Google Feeds API

I know this is likely very easy however I have been bashing my head for little over an hour and I am stuck.
I am trying to use Google Feed API to show a list of recent houses, It works just fine until it comes to pulling the image. I am struggling to get it to pull the image. I am sure there is a way because the slideshow script that google released can get the images...
Here's my code taken from a basic example I am absolutely clueless as to where to go to even try and figure out how to retrieve the image.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Google Feed Loader Example #1</title>
<script type="text/javascript" src="http://www.google.com/jsapi?key=#"></script>
<script type="text/javascript">
google.load("feeds", "1");
google.setOnLoadCallback(showFeed);
function showFeed() {
var feed = new google.feeds.Feed("http://www.trulia.com/rss2/San_Francisco,CA/3p_baths/3p_beds/800000-2000000_price/date;d_sort/");
feed.setNumEntries(10);
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("headlines");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var bmfx = result.feed.entries[i].mediaGroups[0].contents[0].url;
var li = document.createElement("li");
li.innerHTML = '<h3>' + entry.title + ' <cite>by ' + entry.mediaGroup + '</cite></h3>';
li.innerHTML += '<p>' + entry.contentSnippet + '</p>';
container.appendChild(li);
}
} else {
var container = document.getElementById("headlines");
container.innerHTML = '<li>Ooops It Failed';
}
});
}
</script>
</head>
<body>
<h1>Google Feed Loader Example</h1>
<ul id="headlines"></ul>
</body>
</html>
According to your case, you should use:
var bmfx = entry.mediaGroups[0].contents[0].thumbnails[0].url;

Categories