{"id":20522,"date":"2022-11-09T23:24:46","date_gmt":"2022-11-09T17:54:46","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-display-another-html-in-div-from-main-html-closed\/"},"modified":"2022-11-09T23:24:46","modified_gmt":"2022-11-09T17:54:46","slug":"solved-display-another-html-in-div-from-main-html-closed","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-display-another-html-in-div-from-main-html-closed\/","title":{"rendered":"[Solved] Display another HTML in div from main HTML? [closed]"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div id=\"answer-47818322\" class=\"answer js-answer accepted-answer js-accepted-answer\" data-answerid=\"47818322\" data-parentid=\"47818063\" data-score=\"0\" data-position-on-page=\"1\" data-highest-scored=\"1\" data-question-has-accepted-highest-score=\"1\" itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n<div class=\"post-layout\">\n<div class=\"votecell post-layout--left\"><\/div>\n<div class=\"answercell post-layout--right\">\n<div class=\"s-prose js-post-body\" itemprop=\"text\">\n<p>Instead of loading the page into an <code>iframe<\/code>, you can make an <strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/XMLHttpRequest\">AJAX call<\/a><\/strong> to the server and take the response (the page&#8217;s contents) and load it into any element you like. But, <strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/CORS\">there are security concerns<\/a><\/strong> with AJAX calls and, depending on the site you want to connect to, you may not be able to do this.<\/p>\n<\/p>\n<div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"true\" data-babel=\"false\">\n<div class=\"snippet-code\">\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code>&lt;html class=\"no-js\" lang=\"\"&gt;\r\n&lt;head&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n  &lt;div id=\"storeTable\" style=\"width: 900px; height: 200px;\"&gt;&lt;\/div&gt;\r\n  &lt;input type=\"button\" value=\"Capacity Chart\" onclick=\"CapacityChart();\"&gt;\r\n  &lt;script&gt;\r\n      \/\/ Create instance of XHR to make AJAX call with:\r\n      var xhr = new XMLHttpRequest();\r\n      \r\n      \/\/ Configure the component to make the call:\r\n      xhr.open(\"GET\", \"http:\/\/10.12.34.83:88\/Grid.aspx\");\r\n      \r\n      \/\/ Set up an event handler that will fire as the call moves through its various stages\r\n      xhr.addEventListener(\"readystatechange\", function(){\r\n         \r\n         \/\/ If the response has been recieved\r\n         if(xhr.readyState === 4){\r\n            \/\/ And the status is \"OK\"\r\n            if(xhr.status === 200){\r\n              \/\/ Inject the results into the container of choice:\r\n              document.getElementById(\"storeTable\").innerHTML = xhr.responseText;   \r\n            } else {\r\n              console.log(\"Problem getting data\");\r\n            }\r\n         } \r\n      \r\n      });\r\n      \r\n      xhr.send(); \/\/ Make the call\r\n&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n<\/div>\n<\/div><\/div>\n<div class=\"mt24\"><\/div>\n<\/div>\n<p>            <span class=\"d-none\" itemprop=\"commentCount\">2<\/span> <\/p><\/div>\n<\/div>\n<p>[ad_2]<\/p>\n<p>solved Display another HTML in div from main HTML? [closed] <\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] Instead of loading the page into an iframe, you can make an AJAX call to the server and take the response (the page&#8217;s contents) and load it into any element you like. But, there are security concerns with AJAX calls and, depending on the site you want to connect to, you may not be &#8230; <a title=\"[Solved] Display another HTML in div from main HTML? [closed]\" class=\"read-more\" href=\"https:\/\/jassweb.com\/solved\/solved-display-another-html-in-div-from-main-html-closed\/\" aria-label=\"More on [Solved] Display another HTML in div from main HTML? [closed]\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[464,346,747,333],"class_list":["post-20522","post","type-post","status-publish","format-standard","hentry","category-solved","tag-css","tag-html","tag-iframe","tag-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>[Solved] Display another HTML in div from main HTML? [closed] - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-display-another-html-in-div-from-main-html-closed\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Display another HTML in div from main HTML? [closed] - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] Instead of loading the page into an iframe, you can make an AJAX call to the server and take the response (the page&#8217;s contents) and load it into any element you like. But, there are security concerns with AJAX calls and, depending on the site you want to connect to, you may not be ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-display-another-html-in-div-from-main-html-closed\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-09T17:54:46+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-display-another-html-in-div-from-main-html-closed\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-display-another-html-in-div-from-main-html-closed\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Display another HTML in div from main HTML? [closed]\",\"datePublished\":\"2022-11-09T17:54:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-display-another-html-in-div-from-main-html-closed\/\"},\"wordCount\":80,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"css\",\"html\",\"iframe\",\"javascript\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-display-another-html-in-div-from-main-html-closed\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-display-another-html-in-div-from-main-html-closed\/\",\"name\":\"[Solved] Display another HTML in div from main HTML? [closed] - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-11-09T17:54:46+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-display-another-html-in-div-from-main-html-closed\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-display-another-html-in-div-from-main-html-closed\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-display-another-html-in-div-from-main-html-closed\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Display another HTML in div from main HTML? [closed]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Display another HTML in div from main HTML? [closed] - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-display-another-html-in-div-from-main-html-closed\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Display another HTML in div from main HTML? [closed] - JassWeb","og_description":"[ad_1] Instead of loading the page into an iframe, you can make an AJAX call to the server and take the response (the page&#8217;s contents) and load it into any element you like. But, there are security concerns with AJAX calls and, depending on the site you want to connect to, you may not be ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-display-another-html-in-div-from-main-html-closed\/","og_site_name":"JassWeb","article_published_time":"2022-11-09T17:54:46+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-display-another-html-in-div-from-main-html-closed\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-display-another-html-in-div-from-main-html-closed\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Display another HTML in div from main HTML? [closed]","datePublished":"2022-11-09T17:54:46+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-display-another-html-in-div-from-main-html-closed\/"},"wordCount":80,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["css","html","iframe","javascript"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-display-another-html-in-div-from-main-html-closed\/","url":"https:\/\/jassweb.com\/solved\/solved-display-another-html-in-div-from-main-html-closed\/","name":"[Solved] Display another HTML in div from main HTML? [closed] - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-11-09T17:54:46+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-display-another-html-in-div-from-main-html-closed\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-display-another-html-in-div-from-main-html-closed\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-display-another-html-in-div-from-main-html-closed\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Display another HTML in div from main HTML? [closed]"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/20522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=20522"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/20522\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=20522"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=20522"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=20522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}