I am a complete beginner web it comes to web development which is why I can't actually implement any of the solutions I have found so far.
I essentially wish to display content from one of my sites on another. Please assume for now that this second/host site is a local html page and the first/parent(is this right?) site is http://www.mydomain.com
My only other requirement is that the solution should work on Chrome and preferably other modern browsers.
Thanks in advance.
--EDIT--
By resizing iFrame I mean that I want an iFrame that will either:
i) automatically set itself to the browser's size (actual usable space not window itself) + refreshes every 1 second
ii) change its height based on content being accessed from a different domain
Related
I'm looking for the best way to keep a WebRTC video stream + the stream controls (hang up, mute etc.) loaded and active, even if the user navigates to another subpage through the navigation menu.
I thought of the following way, however I don't know if this is the most practical one or if there's a better solution to this nowadays: I'd simply make a wrapper with the navigation menu and put an iFrame where currently the content is. The video stream itself would go in the menu bar itself (it's a sidebar which is wide enough to do something like this), when the user clicks on a menu item, the iFrame src is replaced with the new URL.
Is this the right way to do this? If so however, since I haven't used iFrames that much so far, I have a few more concerns:
Are there any drawbacks as for browser features when using iFrame? For example, I know that Chrome asks you to put several features into the allow attribute of the iFrame, for example when using the camera, microphone or location of the user. Is there anything I absolutely cannot do in iFrames?
Do iFrames share the (PHP) session and cookies with the "main" wrapper, or are those separate sessions?
And probably my biggest concern: How could the JavaScript codes of the wrapper and the iFrames communicate with each other? For example, how could I send a hangup-signal to the video stream in the wrapper from within the iFrame?
Thanks for any hints!
Iframes could work.
Are there any drawbacks as for browser features when using iFrame?
The main issue is that you don't really get control over the presentation of the page while that iframe loads. Users may see a brief moment of solid white, for example, while the previous page is torn down and replaced.
Is there anything I absolutely cannot do in iFrames?
Iframes are pretty flexible. Just keep in mind that they have their own JavaScript context so there is some extra code you need to write to shuffle data back and forth.
Do iFrames share the (PHP) session and cookies with the "main" wrapper
Yes
How could the JavaScript codes of the wrapper and the iFrames communicate with each other?
You can actually access the Document object for the iframe from the outer iframe. (Assuming they're on the same origin, of course.)
const iframe = document.querySlector('iframe');
iframe.contentDocument.querySelector('body').whateveryouwant
Probably the best way though is to use the postMessage API. This allows you send data back and forth as-needed, in a nice isolated way.
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
does anybody know how can I expand javascript so that it targets whole website not only the page in iframe it is on. Im currently using a javascript for gallery on my website, so when you click on a picture it pops up enlarged, however since the page with javascript is in an iframe it shows only in the iframe, how can I accomplish the pop up to expand to the whole page?
Thanks in advance.
Iframes can call out to the window which embeds them using simple javascript (see window.frames on http://www.w3schools.com/jsref/prop_win_frames.asp). However, if src of the iframe is on a different domain, then the script can only affect the iframe, due to security policy within the browser.
If you'd like to apply a work-around, there are some solutions like this: Yet Another cross-domain iframe resize Q&A
These solutions tend to break on different browsers and with updates to browsers.
Your best bet is keeping the entire iframe contents within the browser by writing the iframe code yourself (and hosting on your own domain).
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 have to include an external whitelabel site within an iframe on my page. There are numerous pages on the external site and they vary considerably in height.
I need to adjust the height of my iframe to accommodate this.
I can get the height of the first page loaded into the iframe (using PHP), but no way of getting subsequent page heights because no way of knowing what the url/location changes to in the iframe.
As this is an external url in the iframe the usual security limitations apply, therefore ALL solutions must come from the parent frame. Solution must be workable on FF and IE at least.
The only think I can think of is to test whether the scrollbars are visible on the iframe, but this is seemingly impossible in these circumstances.
If anyone can prove me wrong, or has any other javascript/ajax/php cross-browser solution I'd love to hear it.
It is not possible to do this because of the browser's security model. If it was possible, that would be a security problem and would have to be fixed.
Although letting the embedding site know the height of a third party webpage when embedded in the page seems harmless, this can leak information to the embedding site that the browser's user wants to keep private. For example, http://www.facebook.com/ renders differently depending on whether or not you are logged in, so if my website can work out the height of <iframe src="http://www.facebook.com/"> then I can work out whether or not you are a facebook user, something you probably don't want me to know.
The information leakage would be similar to the infamous CSS History Leak in that it would reveal information about the user's relationship with the third-party site just by "linking" to that site (in this case with an iframe instead of a link). Browser vendors had to plug the CSS History Leak, so I suspect if you could work out the height of a third party site rendered in an iframe in any browser, the vendor would have to fix that too.
The information leaked would be anything that can be inferred from the height of a page when rendered for a user using their cookies (which the browser will send even though rendering in an iframe inside a different domain's page). The specific risks depend entirely on the nature of the embedded site being "attacked". E.g. I could get an idea of how much stackoverflow activity someone visiting my site has by getting the height of https://stackoverflow.com/reputation which is different for different users.
I was wondering how could I reload any website using javascript and set it in a way that when it reloads the scrollbar is looking scrolled down to a certain position. I'm unsure as to how to look for this in Google honestly so I haven't digged up much =/.
I think it has to be somewhere in the instruction to reload it and so far I have:
document.getElementById('life').contentWindow.scroll(0,0); //doesn't work
document.getElementById('life').contentWindow.location.reload();
although the first one gets me:
Permission denied to get
property Window.scroll of
http://www.google.com.
If the website in the iframe is from a different domain than the current page, you won't be allowed to affect it at all with Javascript. This is an intentional property of Javascript to prevent XSS.