Solved

iframe scrolling in html5?

Posted on 2012-03-19
7
769 Views
Last Modified: 2012-03-19
I want to include a page from another website in a page on my site.  But, the page that I want to include will probably not be the same size (or even fit completely in) the iframe container that I wanted to use (especially if the web page containing the iframe has been resized to be even smaller).

I am new to web coding, but I have seen that there may be an issue with scrolling in an iframe when using HTML5.  I have seen sites saying that this s broken, but nothing that gives coded examples of howto work around the issue.

If the page that I want to embed is larger than the area of the iframe, what is the best way to embed the other site's webpage in my page using HTML5 and CSS3 (jQuery and PHP 5 will also be used - just in case that makes any difference).

I do have access to the site code for the site page that I will be embedding.  Should I just code the originating page to read the size of its container and refresh accordingly?  If so, do you have any code samples of how this is done?
0
Comment
Question by:JimHubbard
  • 3
  • 3
7 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37737723
cross browser scripting will always fail because it is a security violation.  Sroling the iframe on your page should not be a problem, but without seeing the HTML it is impossible to know if you have an error that is preventing it.

Cd&
0
 
LVL 11

Assisted Solution

by:Amar Bardoliwala
Amar Bardoliwala earned 166 total points
ID: 37737956
Hello JimHubbard,

See if following helps

http://stackoverflow.com/questions/153152/resizing-an-iframe-based-on-content

Thank you.

Amar Bardolwala
0
 

Author Comment

by:JimHubbard
ID: 37738410
I have been informed that they (the site owners) would like for me to find a solution that does not include altering the primary site from which the catalog is coming.

Is there a way to do this without altering the main site by screen scraping or something?

The main site is an ecommerce site with a catalog and a search function that users can search the catalog for items containing the search terms.  The owners want to display the catalog (with search) on the new site, in an iframe that will resize with the page it is embedded in.

To make the task completely impossible, the two sites are on different servers located in different locations (one is their primary warehouse and the second is a specialty warehouse in another state) - so there goes just linking to the server locally.

And, no...they have not exposed an API from the main site.

Is this even possible?
0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 334 total points
ID: 37738571
A web cannot interact with a page from another domain. Screen scraping may let you display the contents but you will not have the functionality. your problem can be summed up in one word SECURITY browsers and operating systems have restriction that are absolute when it comes to cross-domain access.

AFAIK there is no workaround... hackers would be on it in a second.  Before the restrictions were added cross-domain exploits were the most common method of delivering virus code, trojans, and server crushing bombs.  I don't think you are going to be able to please your bosses.  

Your best hope is to transfer the pages with a server to server HTTP request that then allows you to server the pages from the local server, but any thing embedded like js file could still be an issue.


Cd&

Cd&
0
 

Author Comment

by:JimHubbard
ID: 37738791
I don't think this is going to work - at least not the way they want it done.

Although I am a beginner at web coding, the problem here is that the owner's don't even know s much as me about web coding and are tying my hands by not allowing changes to the main site (like adding a page formatted for inclusion in iframes) or exposing an API.

I think I could show items from the catalog in an iframe by doing some screen scraping on the server - but I'd have to keep a window open to the server to pass through clicks and search info to an actual page and scrape, format and forward the results to the iframe.

Even if I could do the server/scrape thing, the amount of time involved will far exceed the amount of time that it should take to do it right (with an API or iframe formatted search page).

It may be time to tell the owners that it just cannot be done their way.
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 334 total points
ID: 37739036
The hardest part of web development is telling the boss or client that what they want is not possible.  However you have what you need most...alternatives.  So at least you don't not have to say NO!  Instead you can say "it is only possible if...".

Cd&
0
 

Author Closing Comment

by:JimHubbard
ID: 37739090
Thanks for the help!
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

Read about why website design really matters in today's demanding market.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now