{"id":14761,"date":"2015-05-12T05:01:23","date_gmt":"2015-05-11T19:01:23","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=14761"},"modified":"2015-05-11T20:57:01","modified_gmt":"2015-05-11T10:57:01","slug":"htmljavascript-object-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-object-primer-tutorial\/","title":{"rendered":"HTML\/Javascript Object Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/object.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Object Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/object.jpg\" title=\"HTML\/Javascript Object Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Object Primer Tutorial<\/p><\/div>\n<p>There are three HTML elements that embed other HTML or images or media.  They are &#8230;<\/p>\n<ul>\n<li><a target=_blank title='HTML iframe information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp'>iframe<\/a><\/li>\n<li><a target=_blank title='HTML object information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_object.asp'>object<\/a><\/li>\n<li><a target=_blank title='HTML embed information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_embed.asp'>embed<\/a><\/li>\n<\/ul>\n<p> &#8230; and today we are going to show how similar the first two are when you are working with embedded data from the same domain.<\/p>\n<p>HTML iframe elements have that advantage that sometimes their data can be derived from sources outside the domain you are on &#8230; sometimes (ie. sometimes it is not permitted).<\/p>\n<p>So today&#8217;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/object.html\" title='Click picture'>live run<\/a> (source code is <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/object.html_GETME\" title='object.html'>object.html<\/a>) starts off with two quite different HTML web applications sitting side by side as HTML object elements, then thirty seconds later they become iframe elements and then back to object elements 30 seconds on again &#8230; and there is very little difference.<\/p>\n<p>Under these, to show image data, there is a screenshot image of the top two presented in object and iframe elements as an image file.<\/p>\n<p>Here&#8217;s a <a target=_blank title='useful link' href='http:\/\/stackoverflow.com\/questions\/16660559\/difference-between-iframe-embed-and-object-elements'>link<\/a> (thanks) discussing these embedded elements.<\/p>\n<p>So with all this functionality available you can set your mind to writing some <a target=_blank title='Widget information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Web_widget'>widgets<\/a> and\/or <a target=_blank title='Plugin information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Plug-in_%28computing%29'>plug-ins<\/a>!<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d14761' onclick='var dv=document.getElementById(\"d14761\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=iframe\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d14761' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>There are three HTML elements that embed other HTML or images or media. They are &#8230; iframe object embed &#8230; and today we are going to show how similar the first two are when you are working with embedded data &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-object-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,37],"tags":[1538,576,587,652,849,956,957,997,1319,1428],"class_list":["post-14761","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-embed","tag-html","tag-iframe","tag-javascript","tag-object","tag-plugin","tag-plugins","tag-programming","tag-tutorial","tag-widget"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/14761"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=14761"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/14761\/revisions"}],"predecessor-version":[{"id":14768,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/14761\/revisions\/14768"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=14761"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=14761"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=14761"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}