Embedding Html page inside another Html page without using iFrames - html

I ran into an issue where one of my customer's browser does not support iFrames (rather his Outlook does not). Without using iFrames, how can i display another page's content inside Html? Original iFrames insert looked as following:
<iframe src="http://mybox:8081/blah/report.jsp" width="1000" height="420">
<p>Your browser does not support iframes.</p>
</iframe>
Please advise. Thank you.

You cannot without using an iFrame.
Your options are even more limited because you're working with an email client. HTML in email clients are very finicky.

It seems you are using an email client, which definitely doesn't support iFrames, but for reference, you can do this with jQuery on a website.
$(document).ready(function() {
$(".yourSelector").load("/pages/pageyouwanttoloadhtmlof.html");
});
Please note that .load will strip out scripts in most cases (there are uses that won't), and also note that you cannot load content from different domains than yours. (There are ways around this with things like jsonP, but that gets quite complicated, and you pretty much still have to control both domains.

You can use a DIV to display it, another page content should set using DIV's inner html property

Related

Can I embed google blogger site into my website

I have a blogger blog and I have already successfully had the domain set to a subdomain of my website e.g http://blog.jthink.net
But how do I actually embed the blog onto my website so that it has same header and footer as my main website ( http://www.jthink.net ) so it's more like the way they have done it here
Is it even possible with blogger?
Just use an iFrame for this purpose. To embed a webpage in an iFrame in your own blog of a website is equivalent to copying that webpage into your own website or blog.
Adjust the width and height to your own values that you would like to use.
<iframe src ="URL of the website you want to embed" width="100%" height="500"> </iframe>
You could also add
<p>Your browser does not support iFrames.</p>
To notify if a user uses a browser that does not support iFrame.
So the complete code will be
<iframe src ="URL of the website you want to embed" width="100%" height="500">
<p>Your browser does not support iFrames.</p>
</iframe>
Whilst iFrames is literally speaking the way to embed the blog on your webpage it means you cant give people links to a particular post within the blog, so it doesnt treally work very well.
In the end I found you could simply the customize the blogger template to make your blog look like your other pages, I found this worked better than using iframes.
I'm a bit late to the party but If you want an alternative to straight out embedding your blog you could use the the Blogger api?
To my mind that would be the best solution.
Either you can used an iFrame or you can used an Individual div for the Particular site.
Then you can embedded it within the site.
Be assure that you can adjust the Width and height of the frame or div through the CSS.
here is a simple code which help to embedded the blogger site within your existing site.
<iframe src ="www.xyz.com" width="100%" height="100%"> </iframe>
If for any reason the browser doesn't support iFrame you can notify the user for it. By Using the Paragraph or any other tag.
I'm surprised nobody suggested RSS feed subscriptions.
If it's a blogger site then you can just subscribe to the standard site feed in your current CMS (content management system). See this link for more information: support.google.com/blogger/answer/97933?hl=en
In fact, I think this is exactly how the blog you linked to achieved their effect. All the navigation baggage of the original blogger site is left behind and only the content of each post is automatically reposted via RSS content subscription -> blog.beatunes.com/atom.xml
Tools to achieve this:
-Wordpress: wordpress.org/plugins/wp-rss-aggregator
-Joomla!: extensions.joomla.org/extension/simple-rss-feed-reader
-Drupal: drupal.org/node/326575
-SharePoint: lol *highfive*
You can use iframe to embed your blog onto the website.
for example, http://jsfiddle.net/pablofiumara/mCfAe/
References: https://developer.mozilla.org/ko/docs/Web/HTML/Element/iframe
iframes are best for this. Most browsers support them.
Maybe you could use adobe business catalyst page templates?

Firefox tells user they need a plugin to display an embedded webpage

There's a section on my site where I display data from another site, using:
<embed src="URL"></embed>
I recently discovered that this works fine for most people, but that Firefox users get an error telling them they need to install a plugin. I searched around for a solution and people seemed to find that specifying the MIME type worked:
<embed type="text/html" src="URL"></embed>
But this isn't working. I can switch to iFrames, but I dislike how they display the information. Any other suggestions?
Per spec, embed elements are only handled via plug-ins or an SVG renderer (and in the latter case behave just like iframe).
You can do <object data="URL"></object>, but of course that will also behave like iframe...
I've been having the same issue with an html5 game. It appears that Firefox doesn't support if you want to embed an external html file. This tag should only be used for plugins.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed
To embed an external html file into another page in Firefox you have to use iframe or object tags instead. For the interactive nature of my external page I used iframe and it worked in IE / Chrome and FF, I had to make the margins larger than the game itself.

How to embed a webpage inside a webpage for maximum support

What is the best way to embed a webpage inside a webpage for maximum support and according to standards?
I've heard an <object> with an <embed /> inside and <iframe /> alone.
Which is better and more proper to use; and more importantly, work more of the time?
<iframe> is fine, it was actually updated with the HTML 5 spec.
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe for attribute status (deprecated, non-standard, new) and browser support.
<object> and <embed> are often plugin related. If you want to show another page of your site, e.g., http://www.example.com/page2.html, on http://www.example.com/page1.html, use this on page1.html:
<iframe id="myIframe" src="http://www.example.com/page2.html"></iframe>
Height, width, borders, etc. can be defined in CSS.
Using an <iframe> is the correct way to do it. Tutorial on IFRAME: http://manda.com/iframe/

<object> doesn't appear when data=google.co.uk

I want to embed the google home page in a page on my website. I want to use the <object> html5 element because from what I've read this is the most up-to-date way to do this and should work on ie7+ and everything else.
But I'm having problems getting it to work. Here's what I'm using:
<object type="text/html" data="http://www.google.co.uk" style="width: 1000px; height: 600px;"></object>
If I change the url to something different it works fine, but with google... nothing.
Am I missing something? I can't figure out what I'm doing wrong?
this is the most up-to-date way
It isn't. <object> is simply a generic way. It is inconsistently supported.
If you want to embed HTML documents, use an iframe.
That won't help in this situation though. In the HTTP headers for the page, Google say:
X-Frame-Options: SAMEORIGIN
They are forbidding you from embedding their page inside yours, and your browser is respecting their wishes.

Show SVG files on Sharepoint 2007

I'm building a WSS site which has to show SVG files stored on WSS.
I'm trying to use <object> tag to show it and it doesn't show, however, if I use <embed> it works ok. Im'using IE8 and IE7
I've been reading and everyone tells IE prefers <Object> over <embed>, but in WSS it doesn't work this way.
To display the file I'm using a web content editor webpart with this code:
<object type="image/svg+xml" data="/samples/sample.svg"
name="owMain" width="400" height="150">
</object>
Any clue??
I've found that it's not actually necessary to embed SVG as an object.
If you use the SVGWeb JavaScript library, you can actually put your SVG into a normal Content Editor Web Part via the Source Editor, and manipulate the SVG elements via JavaScript.
The library can also work with a referenced SVG file as an object, but I haven't tried that option.
The library is hosted on code.google.com
You cannot add object tags to the html content of a page in WSS. The issue is that the object tag can be used in lots of very bad ways, so it is stripped out by the underlying engine.
You have found that the content editor webpart does not suffer from the same limitations.
The first step, if you haven't already, is to confirm that the HTML content in the response is as you expect (e.g. view source). If it isn't then you've found your issue. If it is, the next step might be to use a debugging proxy like Fiddler to confirm that all of the related requests are being made and handled as you expect. If they're not then you've found your issue (e.g. security). If they are then by the process of elimination you can safely conclude that either the markup or the browser is lacking.
Is it me or IE does not support SVG? Well, it kinda does but it is tricky and it's to draw, not to show svg files. ... If you open with FF can you see what you are expecting?
added
I made an svg draw in IE ... it's not the same, I know, but it's something that you can read and test: stackoverflow.com/questions/536676
I managed to do this on IE7/8 with the following Html:
<embed width="600" height="450" id="objMapView" src="http://XXXXXXXX/file.svgz"
type="image/svg+xml" name="objMapView" border="1"/>
It works Ok bur requires adobe's SVG Plugin