how to load a page in a div tag

Question

sara5454 0 Newbie Poster

14 Years Ago

this is my code (html) i dont know how can i open the page in div , i try with iframe but is failed :/ plz help me!

<html>
<head>
    <title>Template</title>
    <script type="text/javascript" src="script.js"></script>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
    <div class="PageBackgroundGradient"></div>
    <div class="Main">
        <div class="Sheet">
            <div class="Sheet-tl"></div>
            <div class="Sheet-tr"></div>
            <div class="Sheet-bl"></div>
            <div class="Sheet-br"></div>
            <div class="Sheet-tc"></div>
            <div class="Sheet-bc"></div>
            <div class="Sheet-cl"></div>
            <div class="Sheet-cr"></div>
            <div class="Sheet-cc"></div>
            <div class="Sheet-body">
                <div class="nav">
                    <div class="l"></div>
                    <div class="r"></div>
                    <ul class="artmenu">
                        <li><a href="#" class=" active"><span class="l"></span><span class="r"></span><span class="t">Home</span></a></li>
                        <li><a href="phys.html" ><span class="l"></span><span class="r"></span><span class="t">Physically challenged</span></a>
              </li>
                        <li><a href="adap.html"><span class="l"></span><span class="r"></span><span class="t">Adaptive computer devices</span></a></li>
                        <li><a href="ab.html" ><span class="l"></span><span class="r"></span><span class="t">Abilities</span></a>
                    </li>
                    </ul>
                </div>
                <div class="Header">
                    <div class="Header-jpeg"></div>
                    <div class="logo">
                        <h1 id="name-text" class="logo-name"><a href="#">Adaptive computer devices</a></h1>
                        <div id="slogan-text" class="logo-text">assistive technology computer input/output devices for those with a disability disabled</div>
                    </div>
                </div>
                <div class="contentLayout">
               <div class="content">
                        <div class="Post">
                            <div class="Post-body">
                        <div class="Post-inner">
                            <h2 class="PostHeaderIcon-wrapper">Introduction</h2>
                            <div class="PostContent">
                                <p><img class="article" src="images/img1.jpg" alt="an image" style="float: left" /></p>
                              <p>&nbsp; </p>
                                <div>
                                  <div>Various computer devices for the physically challenged have made their life a lot easier, helping them to face the world against all odds. It wouldn't be surprising to know that many among us are not even aware of these computer devices, which have shown a new ray of hope for millions around the world.</div>
                              </div>
                                <br />
                                <p>Until a few years ago, being physically challenged was a curse that made life miserable for the individual, by making him dependent on others for basic survival. But things have changed today, thanks to significant advancements achieved in various sciences. Powered with some of the technological marvels of recent times, even physically challenged individuals have become successful in carving a niche for themselves, thus becoming independent against all odds. The world today is largely dependent on computers, therefore not being aware of the tricks of this trade is bound to make a person feel left out. This was the case with all the disabled people until computer devices for the physically challenged were introduced one by one over the last decade.</p>
                    </div>
                            <div class="cleared"></div>
                        </div>
                            </div>
                        </div>
                        <div class="Post">
                            <div class="Post-body">
                          </div>
                        </div>
                    </div>
                </div>
                <div class="cleared"></div><div class="Footer">
                    <div class="Footer-inner">
                        <div class="Footer-text">
                            <p><a href="#">Contact Us</a> | <a href="#">Terms of Use</a> | <a href="#">Trademarks</a>
                                | <a href="#">Privacy Statement</a><br />
                          Copyright &copy;2012 ---. All Rights Reserved.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="cleared"></div>
        <p class="page-footer">&nbsp;</p>
    </div>
</body>
</html>

html-css javascript web-design

3 Contributors
6 Replies
401 Views
1 Day Discussion Span
Latest Post 14 Years Ago Latest Post by almostbob

Dani AI

Generated 9 Months Ago

This thread shows three useful directions. reported that an embedded page stayed “too small” even after changing iframe attributes; suggested an iframe as the simplest solution and attempted a viewport-sizer script. Both iframe and AJAX/Fetch approaches are valid — they serve different needs. Iframes are quick and isolate the embedded page, but sizing and cross-origin access are common pain points. Fetch/AJAX lets the host fully control layout, accessibility, and history, but requires a bit more code and attention to scripts and SEO.

A frequent cause for an iframe ignoring height/width is parent CSS: percentage heights need explicit heights on ancestor elements, and external CSS can override HTML attributes. A robust CSS fallback is to use viewport units or ensure container heights are defined, for example:

html, body { height: 100%; margin: 0; }
#extern { width: 100%; height: 100vh; border: 0; display: block; }

For automatic sizing: if the framed page is same-origin, the parent can read the frame’s document height and set the iframe style. A concise, corrected pattern is:

const iframe = document.getElementById('extern');
function resizeIframe(){
  try {
    iframe.style.height = iframe.contentWindow.document.documentElement.scrollHeight + 'px';
  } catch(e) { /* cross-origin -> cannot read */ }
}
iframe.addEventListener('load', resizeIframe);
window.addEventListener('resize', resizeIframe);

If embedding the inner HTML into a div is preferred, fetch the target page and extract a fragment rather than dumping an entire HTML document. Example using Fetch + DOMParser:

fetch('phys.html')
  .then(r => r.text())
  .then(html => {
    const doc = new DOMParser().parseFromString(html, 'text/html');
    const frag = doc.querySelector('.content');
    document.querySelector('.content').innerHTML = frag ? frag.innerHTML : html;
    history.pushState({}, '', 'phys.html');
    document.title = doc.title;
  }).catch(console.error);

Final notes: do not inject full pages blindly (scripts won’t auto-run when set via innerHTML; recreate script tags if needed); use postMessage for cross-origin sizing cooperation; update document.title and focus for accessibility; and test computed styles in devtools to find CSS overrides. This complements ’s iframe idea and refines ’s sizing concept with safer, modern patterns.

All 6 Replies

JorgeM 958 Problem Solver

14 Years Ago

So you want to for this page to be "inserted" into another page? You should be able to do this easily with an iframe. The iframe element's syntax is as follows: <iframe src="somepage.htm" ></iframe>

iframe attributes:

src:
height:
width:
name: (deprecated)
id:
longdesc:
frameborder:
marginwidth:
marginheight:
scrolling:
align: (deprecated)
vspace:
hspace:

What happened when you tried to use the iframe element?

JorgeM 958 Problem Solver

14 Years Ago

you can also use JavaScript and/or AJAX to load another page within a div. However, i suggested the iframe as a first option because its an easy solution to implement.

There is another thread on this forum that talks about some additional solutions.
http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/142921/how-to-load-a-page-in-a-div-tag

If you can elobarate on exactly what you are trying to do, you may get some additional recommendations and suggestions...

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

sara5454 0 Newbie Poster · Answer 1 · 2012-05-16T23:06:38+00:00

when i tried to use the iframe element the page open too small when i change the height and the width nothing happened

sara5454 0 Newbie Poster · Answer 2 · 2012-05-16T23:39:20+00:00

sara5454 0 Newbie Poster

14 Years Ago

there's no other solution ? plz :/

sara5454 0 Newbie Poster · Answer 3 · 2012-05-17T20:48:58+00:00

sara5454 0 Newbie Poster

14 Years Ago

thank youuuuuuuuuuuuuuuuuuu :)

almostbob 866 Retired: passive income ROCKS · Answer 4 · 2012-05-18T11:40:15+00:00

will make the iframe the height/width of the window

<script type="text/javascript">
function sizer() { 
    var viewportheight;
    if (typeof window.innerWidth != 'undefined') { 
        viewportheight = window.innerHeight }
    elseif (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) { 
        viewportheight = document.documentElement.clientHeight }
    else { 
        viewportheight = document.getElementsByTagName('body')[0].clientHeight }
    document.getElementById('extern').style.height=viewportheight + 'px'; }
document.onresize = sizer(); </script>
<!--[if IE]>
<script type='text/javascript'>window.onresize=sizer();</script>
<![endif]-->
<title>bla</title>
</head>
<body onload='sizer();'>
<iframe id='extern' frameborder='0' width='100%' height='200px' src='HREF'>loading frame</iframe>

The page will still flow, the iframe will still have scroll bars for over size pages, just the iframe itself will be as large as possible within the current document

how to load a page in a div tag

Dani AI

Recommended Answers Collapse Answers

All 6 Replies

Recommended Answers