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.
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>
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:
Get the document using ajax (jQuery rocks, use that)
Extract the content of the <body> element and put it inside your div element
Get all links and script of <head> element and append them to the <head> element of your existing pgae.
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)...
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
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.
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.
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
Related
I have an external page that I want to embed within my page- it has it's own scripts and CSS that I don't want to conflict with mine. Normally I'd just use an <iframe> and be done with it, but this is a mobile optimised site, and I want to avoid extra HTTP calls wherever possible. So, I want to run the request on the server side and embed the resulting HTML within my page, so that the client never has to be make it's own request.
I can do that by doing something like:
<iframe id="test"></iframe>
<script>
var doc = $("#test")[0].contentWindow.document;
var $body = $('body',doc);
$body.html('<h1>Test</h1>');
</script>
But I'd rather do this without using JavaScript at all. Is that possible? Any content I put between the <iframe> and </iframe> tags gets ignored, as it is used for compatibility reasons with browsers that do not support iframes.
Why not just use a <div>? Optionally, set a fixed width and height and add overflow:auto to its CSS.
Eventually you should be able to use the srcdoc attribute on the iframe. But, it currently is not widely supported. In the meantime your only options are javascript or just having the browser make the call with the traditional src attribute. You might look here, as I believe this stackoverflow question is quite relevant.
Is there something similar to FB.XFBML.parse() but for the HTML5 versions of the social plugins? I don't want to use XFBML...
Basically, I'm building a one page application that needs to change the comments box's data-href attribute and reload based on what content is accessed inside the app.
Calling FB.XFBML.parse() will also reload/reparse HTML5 Like buttons and other Facebook HTML5 social plugins.
In case somebody else comes across this, FB.XFBML.parse() works perfectly unless you pass a parameter to re-parse only part of the document.
If you want to call FB.XFBML.parse( document.getElementById('foo') ) on a specific element, make sure this element contains the HTML5 social plugin and not the social plugin itself.
Otherwise, FB.XFBML.parse() should work in all cases but it will scan the whole DOM.
We have a web content management system and I can't get to the header portion of the page. I can see it in the full page when debugging, but can't upload a revised file.
In the header, there's a portion of the same Javascript - about six lines, but it's truncated and not closed.
In the body, I have the full slideshow Javascript which works great in Firefox, Safari, and Chrome. Strangely it even works in IE8 on my PC, but not on the other 10 pcs I've tested it on.
The only thing I can edit/save changes is the body portion of the page.
I originally thought javascripts had to be in the header, but clearly not since the body script is working in the other browsers. Do you know though if IE8 requires the script to be in the header?
I think the problem is defintitely 1) a partially coded, unclosed script in the header and/or 2) perhaps javascripts have to be in the header for IE8?
In that case, I would need the remote server company to post the javascript that's currently in the body into the header.
Thanks for your help,
Debby
Script elements are allowed in many places and MSIE doesn't impose any additional requirements.
If a script element is unclosed, then everything until the next </script> will be treated as part of that script. If that includes HTML then it will error and stop running that script.
Script tags doesn't have to be in the head section. You should place them there unless you have a good reason not to, but it works just fine to have script tags in the body also.
The unclosed tag is quite likely to cause problems. At worst the browser will just ignore everything until it finds a closing tag for it. If you can't get rid of it you should at least put an empty script tag first in the code that you can control.
There are no limitations on where you keep your code, it is common practice that included javascript libraries (such as jQuery, mooTools, etc) go in the <head> element, while custom javascript goes in the end of the <body> element, because it will only run after all the other things in the page were already downloaded.
The reason for your problem is probably the unclosed <script> tag in the head. It makes everything until the closing </script> tag as script, even critical HTML. Which makes the page render incorrectly, and your javascript to throw errors.
Close the tag and resume with your own body
</script>
</head>
<body>
//... your code
How can I make an iframe that will display only part of the iframes' webpage?
Lets take youtube for example.
How can an iframe display only the youtube video player?
Thanks,
Oded
This is impossible: An iframe will always show the full document. The Same Origin Policy will prevent you from taking a part out of it.
The only workaround would be to fetch Youtube's HTML data from your server (using a server side language), then translate all relative references contained in the page, and output it as if it were a page on your server. You could then isolate specific elements from it because you're in the context of your own domain. This is called setting up a server side proxy.
However, this is a highly imperfect and tough process, and almost (sometimes completely) impossible to get right without breaking stuff, especially with JavaScript and Video. Plus it's most likely illegal, at least in the case of YouTube.
If you're looking specifically for YouTube, you could just fetch the embed code dynamically for the video you're after and display it that way. If you're looking for a general solution, you're in for a long session with the HTML for the target site. If you figure out that your content is all within a <div id='content-you-want'>, for example, then you could do something like:
$.get('proxy.php?url=' + urlEncode("http://my-target-url.com"), function(result_data) {
$("#target-element").html($(result_data).find("#content-you-want").html());
}
if you're using jQuery. But there's still a load of work to be done if the stuff you want isn't conveniently all wrapped up in a div with an id. And you'll need proxy.php to beat the same origin policy.
I have a flash header that I show on one of my customers sites, but instead of creating an entire new website for non-flash, is there a way I can have it render a static image version of the header instead of either redirecting or just not rendering the flash content at all (ie with a FAIL message)?
Maybe something like a noscript for object?
And easy way to do this is to use SWFObject.
http://code.google.com/p/swfobject/
A javascript based solution that allows you to create fallback content.
Just put whatever you need inside of the object element and it'll fallback.