How to load a webpage in a div?

Question

Having a bit of a issue .

A web page whose doctype is not declared contains a div id="abc" . I need to load a web page in this div whose doctype is <! DOCTYPE> . Major problem they are rendering in quirk mode , this leads to look problem .

div "abc" is a popup window, with absolute position .

Content is loaded on user request , content is dynamic and built using PHP 
and can't provide url to achieve this .

There is any way to get same look as in HTML5 without changing content type of any page.

Try because the html file can be loaded dynamically via Ajax — The One and Only ChemistryBlob, Aug 15 '14 at 04:14
@TheOneandOnlyChemistryBlob Cotent is loaded based on user request so i can't use — user3919801, Aug 15 '14 at 04:17
OK...could you use Ajax and echo back the correct content based on the user's request? — The One and Only ChemistryBlob, Aug 15 '14 at 04:20
@TheOneandOnlyChemistryBlob echo won't work since doctype is different . — user3919801, Aug 15 '14 at 04:23

Steini · Answer 1 · 2014-08-15T04:19:23.323

1

Because a div container is part of your current werbsite and it accepts css styles and other stuff from the main website. Your HTML code is even invalid when you start a new html tag within a div container.

Use an iframe tag instead it is especially made to create "a website in a website":

<iframe src="http//path/to/my/site" height="1000" width="500"></iframe>

With this not even the w3c validator would have a problem with that and your css and scripts will not be overwritten by any other scripts included or executed before.

EDIT:

If you need to load content dynamically as you told me use JQuery to alter the iframe's src:

If iframe is not initialized at the beginning, just make it hidden:

<iframe id="content_iframe" src="" height="1000" width="500" style="display: none";></iframe>

Then later load your content however with jQuery, the url via ajax or any other way:

<script type="text/javascript">
    $(document).ready(function() {
        $.ajax({
          url: "path/to/my/url-to-get-my-url-or-content.php",
          type: "post",
          data: any: var },
          success: function(text) {
              //Lets assume I got the target url for the iframe, then just alter its src tag and make it visible:
              $("#content_iframe").attr("src", text);
              //And make it visible with a cool effect :P
              $("#content_iframe").show("slow");

              //Incase you do not have the URL but the raw content, just use function html instead and make it visible same way:
              $("#content_iframe").html(text);
              $("#content_iframe").show("slow");
          },
          error: function() {
               alert("Something went wrong, oops!");
          }
        });
    });
</script>

And your done!

edited Aug 15 '14 at 04:19

answered Aug 15 '14 at 04:06

Steini

2,753
15
24

I have to add content dynamically . – user3919801 Aug 15 '14 at 04:11
With JavaScript or are we talking about PHP? I guess the first one but just to be sure before I give an answer here... – Steini Aug 15 '14 at 04:12
However you can hide the Iframe and put an empty src tag and then later put the contents dynamically using JQuery... – Steini Aug 15 '14 at 04:14
Page is built on server using PHP and sent back to caller function using Ajax call . – user3919801 Aug 15 '14 at 04:15
I got your answer but providing url is not possible . – user3919801 Aug 15 '14 at 04:22
Updated my answer, just put the returned content as direct html in the iframe, jeez you dont even know the basics about modifying html content of elements or several tags such as source but want to use ajax? Are you sure you did your homework here? – Steini Aug 15 '14 at 04:24
Half of website is ready , I never developed website but atleast i know how to change content of a tag .In my case it does not work due to DIV . – user3919801 Aug 15 '14 at 04:28
Ok i got this , i had echo data in chunk , how to grab all data in Response text , it seems that in response Header all content is there but complete :function( ResponseText, textStatus, jqXHR ){ alert(ResponseText); } this give [object , object] – user3919801 Aug 15 '14 at 04:35
Use the. load() method. jQuery("#div").load("url"); – Lucky Edward Aug 15 '14 at 04:50
@LuckyEdward I can't provide URL to load and it doesn't work . – user3919801 Aug 15 '14 at 04:58
@Steini Have you ever tried to change content of It's not working .... – user3919801 Aug 15 '14 at 05:03
Yes I did and this is working, you need another proof? You can find a similar situation here: http://stackoverflow.com/questions/18044073/iframe-without-src-but-still-has-content/18044141#18044141 - Its JavaScript instead of jQuery but that doesnt really matter. – Steini Aug 15 '14 at 05:04
@user3919801 I don't understand... The URL in my example is to the php script providing the content. – Lucky Edward Aug 15 '14 at 07:09

How to load a webpage in a div?

1 Answers1