What would prevent me from using an iframe to embed another page on another trusted site ?
It completely depends on what you want to do. If the iframe will contain scrollable content I advice against it unless you make it really obvious to the user that in that specific region of the screen he will have to use TWO fingers to scroll.
Related
I am wondering if there is any way to hide an AMP iframe in the case that the content inside the iframe does not load?
I have tried setting height to 0px (using postMessage from inside the iframe when content fails), but AMP does not allow this and I am having problems finding a way around this.
I would prefer a fix that allows me to hide it from within the iframe, but I don't think this is actually possible, so a simple solution to hide it from the outside page would also be great at this stage.
AMP Does't allow you to change much things dynamically, Because it may affect the user experience and page load. AMP is all about user first experience
So Unfortunately you don't have anyway to do it right now...!
For a web page, practical reasons demand an iframe to link to other content within the domain. However, while the rest of the page (outside the iframe) doesn't need to scroll, the content within the iframe does. Rather than having a scroll bar within the iframe, how could I use the scroll bar of the page to scroll within the iframe?
The iframe links to a page from the same domain, and while it may not be possible to do this without scripting, ideally it would be a CSS-only solution. If necessary, javascript can be used.
If it helps, the iframe runs up the the bottom edge of the page, so I have been playing around with ways to extend it past the bottom and do it that way.
You would need to have the iFrame resize to the contained content to do this. A task that is after all these years still not as simple as it should be. Take a look at this lib that does the hard work for you.
https://github.com/davidjbradshaw/iframe-resizer
I am trying to do something like:
Google
When a user hovers the link:
<div id="display-site">
//working site contained in a div
</div>
Note I am aware that I can open the link in a new window using html, thought I am interested in figuring out how I would go about 'previewing' the website contained in the <a> tag, in a div container, (if the link is hovered).
This can be done by creating an <iframe> in the DOM on hovering over an <a> and loading the href as the iframe's src= attribute. In order to make it look like a popup, you would need to position the <iframe> at an absolute location, and set its z-index CSS property to a higher value than the rest of the page content.
However, if you need to make modifications to the display of the loaded frame, such as sizing some elements to accommodate the zoom level as suggested by #David's answer, you may run afoul of the same-origin policy, as scripts will not be permitted to access properties of the loaded frame outisde the same domain.
From MDN:
Scripts trying to access a frame's content are subject to the same-origin policy, and cannot access most of the properties in the other window object if it was loaded from a different domain. This also applies to a script inside a frame trying to access its parent window. Cross-domain communication can still be achieved with window.postMessage.
Before continuing - check this benefits the user experience. When I move my mouse over a page and brush over a hyperlink I don't always want a link preview to appear on top. However, assuming this is in the best interests of your users...
Implementation wise, this can be done, as #Michael suggests, by using an <iframe>, however the document within the iframe will be displayed at the user's set zoom level, but showing a 250x250 window of a document designed for at least 1024x768 isn't going to help the user. Thus you need to display a zoomed-out, birds' eye representation of the web-page to the user.
There are ways to get the current viewport zoom level ( How to detect page zoom level in all modern browsers? ) but I don't know how setting it works (in all liklihood it's probably impossible in most cases). Furthermore I don't think you can set zoom on a per-iframe basis (assuming you can set it all).
The best way forward then is to display a scaled-down bitmap page rendering to the user - like Google does for popular pages in its search results. However this means that for every page you link to you need to get a rendered image of the target page.
I remember a few years ago there were companies that provided page thumbnail services (it was part of those annoying doubly-underlined ad text in webpages that was popular around 2005-2008), but they're a rarity now.
I guess you'll have to then set up your own service and host a layout engine (Gecko, WebKit, or Trident) in a way it can generate page thumbnails for you.
All things considered, I don't think it's worth it.
Something like this, just an idea
$('a').hover(function()
{
$('#display-site').load((this).attr('href'));
$('#display-site').show();
});
You will need to set the css property as needed
1- Find a jquery plugin that displays tooltips on element hover.
2- Insert an Iframe of the website that the link refers to inside a div residing in the tooltip container.
I want to show an English wikipedia article on the left side of the page and then show the Spanish version of that wikipedia article on the right side of the page.
Is there a way to do that with html, javascript, ajax, etc.?
I know I could use iframes, but it would be nice to have them scroll together (you scroll one, and the other scrolls... or just have one scroll bar for both) and follow links together (if a link is clicked on one page, the appropriate translated page goes in the other side(if it exists)).
Iframes are good to display pages from another domain and let users browse them within your page. However, there really isn't a way to detect click events within the content of an iframe if it is from another domain. This article explains why.
You basically have to find what page the iframe loaded, right? Even if you were to add an onload event on the iframe to check what page was loaded, even this is not allowed, I'm afraid.
An interesting concept. IF you are sure you want to load two webpages then iframe is your option. However, for the functionality that you desire, you have to use a custom scroll on one of the pages and traverse the second page by the same amount. Here is a sample for a single page custom scroll. Just use the same concept for the other page too.
Update : You can perhaps, have a look at this. The content stored in the databases can be access MediaWiki as far as i know. Use this to get the data specific to your link.
I'm trying to display an map inside an iframe that has a needle which on mouseover shows some information about a certain company, the thing is once you click the link the page opens up inside the iframe which ruins the experience, so i was wondering is it possible to make the links inside an iframe open up in a new window instead perhaps using jquery or something similiar?
the code i have atm is
http://www.jsfiddle.net/rkd59/1/
Edit: the very least capture a click within the iframe so i might resize the iframe
You will need some kind of open API to do this properly, and Eniro doesn't provide one according to this page (in Swedish).
I would recommend you to use the Google Maps API v3 instead. I've made an example on jsFiddle that looks similar to that of Eniro.
I'll gladly give you more help with this, so just ask away!
You can't (or it is extremely hard to ) make events inside the iframe affect the parent page. This is to prevent attacks from XSS, or cross site scripting. Having said that, if the site within the iframe is on your own domain and you want to set up some extremely tricky ajaxing and php session IDs, maybe you could make something work, but even then I'm not sure. And I don't know if this would be a security hole, maybe someone else can speak to that. It would perhaps look like:
main page sets up session ID and passes that to the iframe url via a get variable
the iframe takes click information and sends it to a Session variable via an ajaxing call to a script on the server.
The main page then reads (how?) the session cookie and makes changes based on it's value.
All in all, you may find that it may be much simpler and more secure to acheive what you want using a different method.
Due this map is loaded inside an iFrame, it's not possible to run any javascript event listeners on the links, neither is it possible to change the html.
Please try the following:
<script>
x=document.querySelectorAll("a");
for(i=0;i<x.length;i++)
{
x[i].setAttribute("target","_blank");
}
</script>
Thus all links open in new frame.
To make a link popup in a new window you would usually use target="_blank" as such:
Go to Yahoo
However this will only work if you can modify the code you're showing within the iFrame
There is a partial solution.
You can add an absolutely positioned DIV tag over the top of the IFRAME and capture clicks on this instead. See example here shaded in 20% alpha red.
http://www.jsfiddle.net/rkd59/6/
However, this means that the map works in "read-only mode" and while you can capture the click event you wont know what link the user has clicked on.