I am trying to have iframe or object that comes from www.frames.mysite.com/x.html
into other pages in other subdomain or even other websites. but I can't fix up the autofit I did something before and it was fine but now it's not working
function resizeIframe(id){
//id is the iframe innerside box
// #ssbox is the parent of iframe
var heightx=$('#'+id).contents().height(); //box inside iframe height
$('#ssbox').height(heightx); // parent box height
$('#'+id).css('height',heightx)
}
but now its a origin problem, I tried object and i tried lots of other things, is there anyway that i can include a outside page into another page with a dynamic size like facebook comment system or other web plugins.
and is there any other way that i can draw this html page which is dynamic actually into other pages with different data. i have full access to the server apache is there anything i should do in apache/php or anything?
i found a class in javascript to do that but that one kills users RAM as it's reloading the page every 300ms.
i was thinking is there anyways that i can send the height size of the iframe page from iframe page to parent page of that iframe so javascript can fit the size?
and i need this in pure javascript please if possible.
Related
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 add dynamic image gallery to a site I am working on but I am limited to only HTML and css. So I made a separate page on my own server with required php file to create the gallery and used Iframe to load the gallery page to the site.
Problem is now there is two separate scroll bars. one to scroll the content in the iframe and one for the parent page. This makes scrolling on the page very messy. Is there any way so that I can get rid of the scroll bar for the Iframe and be able to scroll through the content within the Iframe from the parent page. Anyway I can make the Iframe behave like a div? I thought the best way would be to set the height of iframe so the height of iframe would change to fit whatever the content that's in it. This way I thought there wouldn't be need for a scroll bar on the iframe.
Here is the gallery page I am trying to load with Iframe http://lejund.com/plugin/#*
I am open to all your suggestions. Is there better way to achieve this other than the Iframe?
Thank you
I found this solution on github by davidjbradshaw.
https://github.com/davidjbradshaw/iframe-resizer
It's using window.postmessage to achieve this.
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 was studying how Disqus and other embedded wigets are implemented, and I came to realize that they don't use an enclosing iframe where all their widget is run. What they do is to append elements dynamically to the embedding page through JavaScipt and then run almost every form or button in some iframe. What's the point of doing this? Couldn't they just wrap everything in an iframe and then change the parent window URL (to allow navigation) through some kind of cross-domain messaging system such as easyXDM? Can anybody point out some benefits that arise from having some elements not inside an iframe?
Code inside an iframe may not be able to set cookies as browser thinks it is an advertisement.
Iframe content cannot control the size of the outside iframe, so iframe needs to be created with javascript and javascript needs to be loaded externally so that external site has total over iframe size.
I am developing a webpage which our customers want to insert on their websites by wrapping my page in an iframe (cross domain). I don't need to interact with the parent or know anything about whats outside the iframe.
I am using HTML, CSS, Javascript and Webservices.
Question: How am I limited inside an iframe compared to if my page was running outside the iframe?
You're not. Any JS linked within the iframe from your domain will act in the context of the iframe. Aside from being crammed into an unusual container it should work the same as it would if it was loaded independently.
If your needs should change however, there are ways to send signals between parent frame and iframe if both pages have JS written to cooperate. There's methods using the # in URLs which can be read by the parent and don't force page reloads and I believe they share the window.resize event which can be fired manually without actually resizing the window.
UPDATE: There are far better ways to communicate between cross-domain iframes now than there used to be. Naturally you'll still require cooperating JS on both ends but you can use window.postMessage rather than triggering messages via window.resize and data after a hash symbol in the URL. That was a cool trick though.
When creating links you should have in mind to maybe use the target-attribute of the a-tag if you want to create a link for the parent window. Otherwise the new page would be loaded into the iframe.