I am trying to find a iframe equivalent or alternate method of inserting a page into another page, the page will still need to be active, and when I submit a form or click a link within it, it will need to function like an iframe. I know iframes still work, but now that they have been depreciating over several years, I would like to find a new method. Is there one, and what kind of scripting am I looking at?
My answer: No, there is no alternative, at least if you need to embed a page with another domain.
It is logical because you shouldn't have any cross domain access to an embedded page (for example https://americanbank.com/), which can only be guaranteed if the embedded site is captured inside a frame. And since that kind of frame is exactly the iframe, there is no space for alternatives and no reason to not use it.
EDIT: Well I have to concede there are some tricky ways but never without accessing a server side dynamic site via AJAX. So it is somehow possible but not with a comparable effort.
You can ajax in external pages that is very similar to an iframe. jQuery makes this really easy.
Related
I need to embed both pdf-files and images in my html-page, however, due to the fact that my html contains a form and the user has to be able to decide whether he would like to upload a pdf-file or an image, I need a flexible solution regarding how to embed either a pdf-file or an image with the same code.
I read that I could possibly use the <object/> tag, however, I also read that that's not a very "elegant" and possibly slow solution.
I also considered to use <embed/> which, as of right now, is the best solution I could come up with. Unfortunately I couldn't find out about if it's a very conventional solution or not.
I can't seem to find very much resources regarding this topic online, hence why I'm asking here. Are there any other/better ways to embed a pdf- or image-file in an html page?
Edit: I want top display the pdf kind of like a file. Also, I don't want the user to be able to resize the pdf in the viewer
I'm sure this is better suited to a comment, however I'm new and am working on unlocking that feature.
...however,
due to the fact that my html contains a form and the user has to be
able to decide whether he would like to upload a pdf-file or an image...
What are you using for the form (query language & database management)?
(PHP, Django, MySQL, MongoDB, etc)
Are there any other/better ways to embed a
pdf- or image-file in an html page?
I would recommend using embed or iframes. You are correct in thinking that the object tag is not an elegant solution, since you are dealing with images.
Edit: I want top display the pdf kind of like a file. Also, I don't
want the user to be able to resize the pdf in the viewer
Easy to do with iframes. There's a lot of hate when it comes to iframes. As you seem to plan on using it as a tool to display a file within a page, then I believe using an iframe here is just fine.
Check out this link on iframes. (will also tell you how to keep the user from resizing it)
I have a busy photo website that is currently making a new page request every time a user wants to load another page of results. I would now like to implement an AJAX/AJAX style paging effect, to only the gallery part of the page.
I can do this in jQuery/JS loading the different pages via AJAX but is this also possible, as a cheat, to use an iFrame? So when a user searches, post the input to the iFrame target and when they select a page number, post that to the iFrame target.
I ask this because I know there are some good uses of iFrames and bad ones. I would like to make sure this isn't one of the bad ones. I have read about browser back buttons causing issues with using iFrames. Will this be an issue here, if it's a good idea of course?
You could look into jQuery's .load() function here. That's what I'd recommend. the iFrame will still make a new page request. As well, .load() actually builds the content into your page, not just in a framed page. Looks a little more professional, works a little better, and isn't as heavy on the server (though 1 page load isn't much to it)
I am relatively new programmer, talking with a partner he told me, that before AJAX, he used a iframe to send data and change the content(obviously with help of JavaScript).
I understood that both are similar techniques, but i didn't find a article to describe their characteristic,
what are advantages of AJAX over Iframe ?
EDIT
i didnt find any explanation of the technique, but my partner told me he post the data trough a hidden iframe and submit the iframe, sound like just the iframe have to be refreshed, but i never did that
One advantage AJAX has is being able to read the state/status of the
request. You also have access to page headers, which you don't with
Iframes.
Ajax can handle multiple asynch requests. It's a little trickier
with Iframes as you need to create an Iframe per request (and keep
track of all of them to delete them later) instead of recycling the
same one.
Existing libraries are full of AJAX goodness and there is a larger community support base.
iframe
is a way show seperately two (or more) webpages in one
ajax
is a way to merge two (or more) webpages ( or new data ) into one
key advantages to Ajax I find are;
CSS will flow to the page called into it.
A way to retrieve data and update new information to the visitors without page refresh.
A fab mention to this site for it's clever use of Ajax.
A'Google instant' and suggestive searching is achieved via Ajax
Just my two cents:
I agree with Kris above that I wouldn't say they are comparable.
There's on use case that I find iFrames to be easier to work with over AJAX and that is if you need to submit a complicated form to another page but you don't need any response - the iframe route is by far the easiest to code.
Beyond that, AJAX, using a metaphor, acts a very knowledgeable go-between. It will handle multiple requests, the status of those requests, and hand back the data in the format you need.
I just wanted to add this because I didn't see in any of the answers.
The reasons to use Ajax are mostly about control, which you get a lot of. These reasons have been mentioned above.
One serious downside of Ajax, though, is that it is a JS fix. JavaScript is a great language, but people have been throwing it at every problem for a while now, and things which could be optimized if they were built in to the browsers, are now instead being done slowly (compared to compiled languages) with JS.
iFrames are a great example of this. They represent an incredibly common use case, wanting to include some html in some other html. Unfortunately, they aren't very amazing at it, often creating more headache than anything else.
If you want to include something and not have it mess with your site, nor your site to mess with it, iFrames are great. For the more common use case of including some random html in some other html, Ajax is better.
And here is the point I'm trying to make: this is dumb. There is no reason there shouldn't be something like an iFrame that acts more like Ajax. But, by jumping on board (as all of us did) with Ajax, we are now left with no choice.
The biggest reason this is a problem is that JS was never meant to be the absolute building blocks of the internet. Further, it's being used by pretty much every site around to violate user privacy. So, if you're looking for a good reason to use iFrames, this is mine:
It feels good to not need JS. If you can make your site improved by JS rather than dependent on it, that's a hard earned accomplishment, and the site will feel less "hacky" overall.
Anyways, that's just my input.
In my experience data loaded via AJAX is easier to manipulate versus data inside an iFrame. Also AJAX is really good for creating a better user experience. However I am not sure if I would necessarily put iFrames and AJAX in the same category because AJAX is asynchronous content and an iFrame is really just another page being loaded from outside of your site.
Also I could see iFraming creating SEO barriers and creating bad user experience. Honestly though if I had access to content I would prefer AJAX.
I have affiliated with expedia and I am using their API system. One of their requirements for launching the site is adding the terms and agreements to my page and they give us this page: http://travel.ian.com/index.jsp?pageName=userAgreement&locale=en_US&cid=xxx. I do not want to go to a different site, and I can not copy and paste the information because of updates. I also prefer not to use an iframe. Does anyone have any ideas on how to do this? Here is a webpage using this on their site with their domain: http://www.helloweekends.com/terms.htm. Does anyone know how they did this? Any help would be greatly appreciated!
Since it originates from another domain, it wouldn't be possible to use JavaScript, due to the same origin policy. Also, relying on JavaScript for the update would be trouble for users who has JavaScript disabled, as they wouldn't see the terms. Since you don't want to use an iframe, or copy the content, I guess your best shot would be to scrape their page with a server-side language of your choice, and then display it on your page.
Scraping can be a bit tricky though, if you rely on their markup. If they change their markup, there is a chance that your script will break, thus stop updating the terms.
There are various tutorials available on how to scrape sites. Here are a few PHP examples:
Web scrape with PHP
PHP Screen Scraping Tutorial
Note Make sure that they allow you to scrape the page prior to implementing it, so that you don't violate their rules.
Do you know if their API serves something with JSON? A JSONP call can get the values to you, but it will make your page rely on javascript for the users to see the updated page.
Another option is to use PHP of any other server side language to get the contents of the url, process it and return the block you require.
I would suggest the load() function offered by jQuery. It makes a simple AJAX call to retrieve a file, and you could even use a selector to only grab part of the page. For example, load the contents of a HTML page into a div:
$('#div_id').load('my_file.html');
Or just load a part of the page:
$('#div_id').load('my_file.html #main_text_id');
I am trying to get an iframe B communicate with site A.
I've searched and searched and every thing I read says it's impossible if they are of different domain (the iframe src is coming from a sub domain).
I want to communicate because my company has ads on its page and it needs to refresh them every X minutes. This is ok if it's a normal add, but some adds extend. Like I have adds that start with 300x250 and then get to 800x300.
I wanted to communicate to the iframe to know when the add was going to expand but it just doesn't seem to be a way. Is there any way to let the add go beyond the initial size of the iframe?
If the add is 300x250 the iframe will also have 300x250, but when the add expands it get's cut off, so I really need to either get the iframe to expand also or have the add go beyond the size of the iframe.
Anyone know how to do this or have some tutorial that shows how to have some basic communication to an iframe.
Note: There are some websites that also serve adds that have a totally different domain, so it would be great if someone knew how to make it go beyond the iframe.
Thanks
If you want the two iframes to communicate and you say one is on a different subdomain but the same top-level domain, you can do inter-frame scripting. See http://ajaxian.com/archives/how-to-make-xmlhttprequest-calls-to-another-server-in-your-domain.
The trick is to get page A and B to both set
document.domain = 'SameTopLevelDomain.com';
and the browser will then let the pages communicate (eg grab data from the other, call functions, etc).
However if the two pages are on different domains altogether, you'd have to take the server-side proxy approach as answered earlier.
You can't cross iframe boundaries for security reason, it would be straightforward to steal your login credentials to any site if that would be possible.
However you can make server side proxy, which would redirect every query from iframe to ads servers. That way your iframe could actually have source in the same domain (or subdomain)
There is a way to do cross-domain communication using iframes, described in an answer to Resizing an Iframe based on content.
Many ad-serving companies serve their banners on your site via iframes, and use the technique outlined in the answer above to ensure that the iframe can expand to the full required size of the creative.
Maybe my answer Cross-site AJAX requests will help you.