Tutorials Courses Jobs

Article Categories

Selected Reading

How to load external website into an using jQuery?</h1> <div class="al-detail-tags"> <a href="https://www.tutorialspoint.com/articles/category/jQuery" class="al-detail-tag">jQuery</a> <a href="https://www.tutorialspoint.com/articles/category/Web-Development" class="al-detail-tag">Web Development</a> <a href="https://www.tutorialspoint.com/articles/category/Front-End-Technology" class="al-detail-tag">Front End Technology</a> </div>  <div class="al-detail-ad"><div id='tutorialspointcom47470'></div></div>  <div class="al-detail-answer tutorial-content"> <p style="">To load an external HTML into <iframe> using jQuery, use the <em>attr()</em> method. In that set the source for iframe. You can try to run the following code to learn how to locate external HTML ?</p> <h2 style="">Example</h2> <p style=""><a href="http://tpcg.io/vGxwPv" rel="nofollow noopener noreferrer" target="_blank">Live Demo</a></p> <pre class="prettyprint notranslate prettyprinted" style=""><span class="dec"><!DOCTYPE html></span><span class="pln"> </span><span class="tag"><html></span><span class="pln"> </span><span class="tag"><head></span><span class="pln"> </span><span class="tag"><script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"</span><span class="tag">></script></span><span class="pln"> </span><span class="tag"><script></span><span class="pln"> $</span><span class="pun">(</span><span class="pln">document</span><span class="pun">).</span><span class="pln">ready</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(){</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#iframe'</span><span class="pun">).</span><span class="pln">attr</span><span class="pun">(</span><span class="str">'src'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'https://www.qries.com'</span><span class="pun">);</span><span class="pln"> </span><span class="pun">});</span><span class="pln"> </span><span class="tag"></script></span><span class="pln"> </span><span class="tag"></head></span><span class="pln"> </span><span class="tag"><body></span><span class="pln"> </span><span class="tag"><iframe</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"iframe"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"myIframe"</span><span class="pln"> </span><span class="atn">frameborder</span><span class="pun">=</span><span class="atv">"5"</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"500"</span><span class="pln"> </span><span class="atn">height</span><span class="pun">=</span><span class="atv">"300"</span><span class="tag">></iframe></span><span class="pln"> </span><span class="tag"></body></span><span class="pln"> </span><span class="tag"></html></span></pre> </div> <div class="clear"></div>  <div class="qa_widget mui-panel prof-view-artcle"> <div class=""> <a href="https://www.tutorialspoint.com/authors/Amit-D" target="_blank" title="Amit D" class="mui--pull-left"> <img class="profile-img1" src="https://www.tutorialspoint.com/assets/profiles/13349/profile/60_63530-1512538715.jpg" alt="Amit D"> </a> <div class="qa_author"> <a href="https://www.tutorialspoint.com/authors/Amit-D" target="_blank"><span>Amit D</span></a> <p class="prof-desigtn mb-0"><b></b></p> </div> </div> <div class="clear"></div> <div class="library-page-bottom-nav" id="divStats" data-qid="776" data-quid="13349" style="margin-block:1rem !important;padding-top:18px;align-items:center;border-top:1px dashed #ccc;font-size:14px;"> <div><span class="date">Updated on: </span>2023-04-04T10:12:08+05:30</div> <div class="flex-group"> <div class="uthor-prof-social-icon mt-2"> <span class="share-options"> <a onclick="copyToClipboard();" title="Copy To Clipboard"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M301.148 394.702l-79.2 79.19c-50.778 50.799-133.037 50.824-183.84 0-50.799-50.778-50.824-133.037 0-183.84l79.19-79.2a132.833 132.833 0 0 1 3.532-3.403c7.55-7.005 19.795-2.004 20.208 8.286.193 4.807.598 9.607 1.216 14.384.481 3.717-.746 7.447-3.397 10.096-16.48 16.469-75.142 75.128-75.3 75.286-36.738 36.759-36.731 96.188 0 132.94 36.759 36.738 96.188 36.731 132.94 0l79.2-79.2.36-.36c36.301-36.672 36.14-96.07-.37-132.58-8.214-8.214-17.577-14.58-27.585-19.109-4.566-2.066-7.426-6.667-7.134-11.67a62.197 62.197 0 0 1 2.826-15.259c2.103-6.601 9.531-9.961 15.919-7.28 15.073 6.324 29.187 15.62 41.435 27.868 50.688 50.689 50.679 133.17 0 183.851zm-90.296-93.554c12.248 12.248 26.362 21.544 41.435 27.868 6.388 2.68 13.816-.68 15.919-7.28a62.197 62.197 0 0 0 2.826-15.259c.292-5.003-2.569-9.604-7.134-11.67-10.008-4.528-19.371-10.894-27.585-19.109-36.51-36.51-36.671-95.908-.37-132.58l.36-.36 79.2-79.2c36.752-36.731 96.181-36.738 132.94 0 36.731 36.752 36.738 96.181 0 132.94-.157.157-58.819 58.817-75.3 75.286-2.651 2.65-3.878 6.379-3.397 10.096a163.156 163.156 0 0 1 1.216 14.384c.413 10.291 12.659 15.291 20.208 8.286a131.324 131.324 0 0 0 3.532-3.403l79.19-79.2c50.824-50.803 50.799-133.062 0-183.84-50.802-50.824-133.062-50.799-183.84 0l-79.2 79.19c-50.679 50.682-50.688 133.163 0 183.851z"/></svg></a> <a onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=https://www.tutorialspoint.com/article/how-to-load-external-website-into-an-using-jquery&t=How to load external website into an using jQuery?&description=To load an external HTML into <iframe> using jQuery, use the attr() method. In that set the source for iframe. You can try to run the following code to learn how to locate external HTML − Live Demo','sharer','toolbar=0,status=0,width=580,height=325');" href="javascript:void(0)" title="Share on Facebook"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512"><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"/></svg></a> <a onclick="window.open('https://www.linkedin.com/shareArticle?url=https://www.tutorialspoint.com/article/how-to-load-external-website-into-an-using-jquery&title=How to load external website into an using jQuery?&summary=To load an external HTML into <iframe> using jQuery, use the attr() method. In that set the source for iframe. You can try to run the following code to learn how to locate external HTML − Live Demo','sharer','toolbar=0,status=0,width=580,height=325');" href="javascript:void(0)" title="Share on LinkedIn"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"/></svg></a> <a onclick="window.open('https://www.twitter.com/intent/tweet?url=https://www.tutorialspoint.com/article/how-to-load-external-website-into-an-using-jquery&text=To load an external HTML into <iframe> using jQuery, use the attr() method. In that set the source for iframe. You can try to run the following code to learn how to locate external HTML − Live Demo','sharer','toolbar=0,status=0,width=580,height=325');" href="javascript:void(0)" title="Share on X"><svg fill="black" xmlns="http://www.w3.org/2000/svg" height="1.2em" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg></a> </span> </div> <div> <p class="views-count" title="Article Views"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><path d="M288 288a64 64 0 0 0 0-128c-1 0-1.88.24-2.85.29a47.5 47.5 0 0 1-60.86 60.86c0 1-.29 1.88-.29 2.85a64 64 0 0 0 64 64zm284.52-46.6C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 96a128 128 0 1 1-128 128A128.14 128.14 0 0 1 288 96zm0 320c-107.36 0-205.46-61.31-256-160a294.78 294.78 0 0 1 129.78-129.33C140.91 153.69 128 187.17 128 224a160 160 0 0 0 320 0c0-36.83-12.91-70.31-33.78-97.33A294.78 294.78 0 0 1 544 256c-50.53 98.69-148.64 160-256 160z"/></svg> <span id="spanViews">39 Views</span></p> </div> </div> </div> </div>  <div class="related-tutorials" style="margin:16px 0;padding:0;"> <div class="related-tutorialsheader" style="padding:14px 20px;margin:0;"> <svg class="related-tutorialsicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" style="width:20px;height:20px;fill:#fff;flex-shrink:0;"><path d="M320 32L0 160l320 128 320-128L320 32zM64 192v128l256 128 256-128V192L320 320 64 192z"/></svg> <h3 class="related-tutorialstitle" style="margin:0;padding:0;font-size:16px;">Learn More in Our Tutorials</h3> </div> <ul class="related-tutorialslist" style="list-style:none;margin:0;padding:4px 0;"> <li class="related-tutorialsitem" style="margin:0;padding:0;list-style:none;"> <a href="/jquery/ajax-load.htm" class="related-tutorialslink" style="padding:10px 20px;text-decoration:none;"> <span class="related-tutorialsarrow" style="display:inline-block;"></span> <span class="related-tutorialslink-text">jQuery - load() Method</span> <span class="related-tutorialssubject">Jquery</span> </a> </li> </ul> </div>  <div class="library-cta"> <div> <h5 class="library-ctatitle">Kickstart Your <span class="text-yellow-400">Career</span></h5> <p>Get certified by completing the course</p> <a target="_blank" href="https://www.tutorialspoint.com/latest/certifications" class="library-ctabutton button button--yellow">Get Started</a> </div> <img src="/static/images/library-cta.svg" alt=""> </div>  <div class="al-bottom-nav"> <button class="al-btn al-btn-print" id="print-page" onclick="window.print()"> <i class="fa-sharp fa-light fa-print"></i> Print Page </button> <div style="display:flex;gap:8px;"> <a href="https://www.tutorialspoint.com/article/How-to-change-the-background-image-using-jQuery" class="al-btn al-btn-prev" title="How to change the background image using jQuery?"><i class="fa-sharp fa-light fa-chevron-left"></i> Previous</a> <a href="https://www.tutorialspoint.com/article/Using-SAP-BAPI-API-s-to-extract-information-from-client-system" class="al-btn al-btn-next" title="Using SAP BAPI API&rsquo;s to extract information from client system">Next <i class="fa-sharp fa-light fa-chevron-right"></i></a> </div> </div>  <div class="bottom-library-ads" style="margin:16px auto 5px;text-align:center;"> <div class="google-bottom-ads" id="google-bottom-ads"> <div>Advertisements</div> <div style="width:750px;height:300px;margin:0 auto;max-width:100%;"><div id='tutorialspointcom47468'></div></div> </div> </div> </div> </div>  <div class="al-right-panel"> <div class="data-sticky" id="google-right-ads"> <div class="google-right-ad" style="margin:0px auto!important;margin-top:5px;min-height:280px!important"><div id='tutorialspointcom47465'></div></div> <div class="google-right-ad" style="margin-top:16px;min-height:280px!important"><div id='tutorialspointcom47466'></div></div> <div class="google-right-ad" style="margin-top:16px;min-height:280px!important"><div id='tutorialspointcom47467'></div></div> </div> </div> </div> </div> </main>  <footer class="footer"> <ul class="footerlist container"> <li><a href="/about/index.htm">ABOUT US</a></li><li><a href="/about/about_team.htm">OUR TEAM</a></li><li><a href="/about/about_careers.htm">CAREERS</a></li><li><a href="/job_search.php">JOBS</a></li><li><a href="/about/contact_us.htm">CONTACT US</a></li><li><a href="/about/about_terms_of_use.htm">TERMS OF USE</a></li><li><a href="/about/about_privacy.htm">PRIVACY POLICY</a></li><li><a href="/about/return_refund_policy.htm">REFUND POLICY</a></li><li><a href="/about/about_cookies.htm">COOKIES POLICY</a></li><li><a href="/about/faq.htm">FAQ'S</a></li> </ul> <div class="footersocials container"> <img class="footerlogo" src="https://www.tutorialspoint.com/static/images/logo-footer.svg" alt="tutorials point logo"> <div class="footer__social-icons"> <a rel="nofollow" target="_blank" href="https://www.facebook.com/tutorialspointindia"><i class="fa-brands fa-facebook-f"></i></a> <a target="_blank" href="https://x.com/tutorialspoint" rel="nofollow"><i class="fa-brands fa-x-twitter"></i></a> <a target="_blank" href="https://www.youtube.com/channel/UCVLbzhxVTiTLiVKeGV7WEBg" rel="nofollow"><i class="fa-brands fa-youtube"></i></a> <a target="_blank" href="https://www.linkedin.com/company/tutorialspoint/" rel="nofollow"><i class="fa-brands fa-linkedin-in"></i></a> <a target="_blank" href="https://www.instagram.com/tutorialspoint_/" rel="nofollow"><i class="fa-brands fa-instagram"></i></a> </div> <div class="footer__apps"> <a href="https://play.google.com/store/apps/details?id=com.tutorialspoint.onlineviewer" target="_blank" rel="nofollow"><img src="https://www.tutorialspoint.com/static/images/googleplay.svg" alt="Download Android App"></a> <a href="https://itunes.apple.com/us/app/tutorials-point/id914891263?ls=1&mt=8" target="_blank" rel="nofollow"><img src="https://www.tutorialspoint.com/static/images/appstore.svg" alt="Download IOS App"></a> </div> </div> <div class="footerlegal-wrapper"> <div class="footerlegal container"> <p>Tutorials Point is a leading Ed Tech company striving to provide the best learning material on technical and non-technical subjects.</p> <p class="footer__copyright">Copyright 2026. All Rights Reserved.</p> </div> </div> </footer> <script> /* From article.min.js - required functions / var qa_baseurl = 'https://www.tutorialspoint.com/articles/'; var baseurl = 'https://www.tutorialspoint.com/'; var homeurl = 'https://www.tutorialspoint.com'; function errorToaster(errmsg){ var el = document.getElementById("error-warning"); if(el){ el.innerHTML = errmsg; el.style.display = 'block'; } var loader = document.getElementById('wrap_loader'); if(loader) loader.style.display = 'none'; setTimeout(function(){ if(el){ el.innerHTML = ''; el.style.display = 'none'; } }, 3000); } function successToaster(errmsg){ var el = document.getElementById("error-success"); if(el){ el.innerHTML = errmsg; el.style.display = 'block'; } var loader = document.getElementById('wrap_loader'); if(loader) loader.style.display = 'none'; setTimeout(function(){ if(el){ el.innerHTML = ''; el.style.display = 'none'; } }, 3000); } function copyToClipboard() { var dummy = document.createElement('input'), text = window.location.href; document.body.appendChild(dummy); dummy.value = text; dummy.select(); document.execCommand('copy'); document.body.removeChild(dummy); var el = document.getElementById("error-success"); if(el){ el.innerHTML = 'Copied to Clipboard'; el.style.display = 'block'; } setTimeout(function(){ if(el) el.style.display = 'none'; }, 3000); } / Fetch view count via AJAX / var divStatsExists = document.getElementById("divStats"); if (divStatsExists) { var qid = divStatsExists.dataset.qid; var quid = divStatsExists.dataset.quid; var formData = new FormData(); formData.append('qid', qid); formData.append('quid', quid); fetch('/articles/ajax/ajaxGetStats.php', { method: 'POST', body: formData }) .then(function(response){ return response.json(); }) .then(function(jsonResponse){ var spanViews = document.getElementById('spanViews'); if(spanViews) spanViews.innerHTML = jsonResponse.viewcount + ' Views'; }); } / Search - live AJAX */ (function() { var $search = document.getElementById('alSearch'); var $results = document.getElementById('alSearchResults'); if (!$search || !$results) return; var debounceTimer = null; $search.addEventListener('input', function() { var q = this.value.trim(); clearTimeout(debounceTimer); if (q.length < 2) { $results.innerHTML = ''; $results.style.display = 'none'; return; } debounceTimer = setTimeout(function() { var formData = new FormData(); formData.append('keyword', q); fetch('/articles/ajax/ajaxSearchArticles.php', { method: 'POST', body: formData }) .then(function(r) { return r.json(); }) .then(function(data) { if (data.length > 0) { var html = ''; data.forEach(function(item) { html += '<a href="' + item.url + '" class="al-search-result-item">' + item.title + '</a>'; }); $results.innerHTML = html; $results.style.display = 'block'; } else { $results.innerHTML = '<div class="al-search-no-results">No articles found</div>'; $results.style.display = 'block'; } }) .catch(function() { $results.style.display = 'none'; }); }, 300); }); $search.addEventListener('keydown', function(e) { if (e.key === 'Enter') { var q = this.value.trim(); if (q.length >= 2) window.location.href = '/articles/index.php?search=' + encodeURIComponent(q); } }); document.addEventListener('click', function(e) { if (!e.target.closest('.al-search-wrap')) { $results.style.display = 'none'; } }); })(); </script> <div class="error-success" id="error-success"></div> <div class="error-warning" id="error-warning"></div> <script src="/static/js/new-lib-script.js?v-11"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-E4SW76VCNP"></script> <script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-E4SW76VCNP');</script> <script>!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,document,'script','https://connect.facebook.net/en_US/fbevents.js');fbq('init','854536859149047');fbq('track','PageView');</script> </body> </html>