CODEWITHSUNDEEP
htmliframe
Varun
Varun

Reputation: 5061

Include a webpage inside a div

I have to include a webpage inside my webpage's div. I want somehting like iframe to be done with DIV. Basically, I will be providing a URL to my div and it has to open it inside itself... Do we have something like this in modern HTML? I cannot use frames as some browsers have issues with frames.

Upvotes: 10

Views: 79969

Answers (7)

Aubrey Love
Aubrey Love

Reputation: 1034

Actually, I agree with Frédéric Hamidi from above. Just embed an “object” inside a div and reference the URL of the other page in that object.

You can set all the styling for the second page on itself or in a separate CSS file. That styling gets imported along with the page content without conflicting with the current pages style or scripts.

I tested Frédéric Hamidi’s theory on these browsers, all performed just fine.

• Internet Explorer – v11

• Microsoft Edge - v 84.0.522.59 (Official build) (64-bit)

• Google Chrome – v84.0.4147.105

• FireFox – v79.0

• Brave – v1.11.104

• Opera – v69.0.3686.95

• Safari – v13

Upvotes: -1

Jan
Jan

Reputation: 345

Try using an <object> element:

<div style="margin: 0 auto; width:100%; height:400px;">
    <object type="text/html" data="**URL to page**"
            style="width:100%; height:100%; margin:1%;">
    </object>
</div>

Upvotes: 22

Endophage
Endophage

Reputation: 21483

This is really an extension to Saeed's response. To get around cross site scripting issues, you will have to write a script on your own server that does a CURL call for the webpage to be embedded. Your javascript will then make a call to this script, passing the URL as a GET/POST parameter.

I agree with a lot of other people here that this is a case where you really should just use an iframe... I believe you can set the iframe with no src tag and manually put the content inside it. That would mean you don't need to take the steps Saeed suggested to break up the head and body. However you still need the script I described to get around cross site scripting.

Upvotes: -1

Alan H.
Alan H.

Reputation: 16598

It should have been in the question itself, but the OP has clarified the reason he does not want to use an iframe is because interframe communication is not allowed. Well, that’s nothing a proxy + postMessage can’t solve.

I believe there is simply no way to actually embed a full document within another one, retaining things like separation of styles and scripts and the like, without using frames in some sense.

Upvotes: 0

kleinohad
kleinohad

Reputation: 5912

You can use iframe or if you decide to use jQuery load function (http://api.jquery.com/load/) you need to avoid the cross script scripting problem - you need to create some sort of proxie take a look at this: WebBrowser Control: Disable Cross Site XSS Filtering or another way to process JS in full on HTML

Upvotes: 1

Saeed Neamati
Saeed Neamati

Reputation: 35852

Nope. You can't embed a complete HTML document inside another div element as this is a block level element and W3C has defined what could be included inside it.

But there is a workaround. Follow these steps:

  1. Get the document using ajax (jQuery rocks, use that)
  2. Extract the content of the <body> element and put it inside your div element
  3. Get all links and script of <head> element and append them to the <head> element of your existing pgae.

Upvotes: 6

Headshota
Headshota

Reputation: 21449

you should use iframe. that's basically what iframes are for. if you stick with modern browsers in any case they don't have issues with iframes (not more than you'll have to face using div's instead)...

Upvotes: 4

Related Questions