Get data from one website and show it in another website - javascript

Our client has two websites and they share one common section, he wants us to pick data on the fly from one website and display it as it is in the other website, excluding the header and footer. I tried using an iframe but the page contains Flash and it does not show the Flash content in the child website. Using an iframe I was able to show the entire website (Flash didn't load) but I don't want the header and footer.
Any help would be appreciated.
Note : We don't have database or code access to the parent web site from where we are picking the data.

didn't quite understand your Note..
Considering you can add some code to both sites and you want to show only part of the site -
assume you have siteA and siteB here is a simple solution:
siteA can open an iframe that hosts siteB with a url param like ?sendSiteA=true
in the js of siteB, when parsing this param you will have a function that will grab section that you want to show, append it to the body and hide everything else.
this is not the best way to share data, but it will work.
P.S. you can pass the dimensions of the iframe in another url param and adjust the dimentions of rht section in siteB

Related

A live view of an external website

How do you get a div that is populated with a live screen image of an external website without using iFrames? e.g. www.google.com
I want to produce a portfolio website, I have a number of sites that are regularly updated. What I want to do is have javascript open on page load, I want it to find a specific external site (e.g. www.google.com) and then take a screenshot. Then I want it to display the screenshot on my portfolio page. Or show a live view of the website inside a div. I dont want to use iFrames as I feel it just looks out of place. I don't need the JS to save the screenshot, just to display it.

Is it possible to get url of child iframe with PHP after user navigates?

We are building an educational tool whereby students opens a website in another tab/window and then searches around the other site. Once finding the information they enter the url of the page they were on into a box. Its a bit clunky and what we want to do is allow them to open the new site (bbc.co.uk for example) within an iframe that has a header at the top allowing htem to return to their workbook.
When they navigate around the BBC site, we would like for them to be able to click a button on our frame which grabs what url they are on and some other info like page header etc and insert that automatically into their workbook.
However I cant seem to find how to grab the url of the page being viewed within the iframe. As we send them to bbc, I can get the source id easily enough but as soon as they start moving around the bbc site doing their research there is no way for the parent iframe (on our domain) to see what page they are on?
I know this is not possible in JS due to XSS issues, but was wondering if there is a workaround. Or any other way to grab the url. Currently our way of doing things is clunky, we want to make the tool a lot more easier.
Thanks
Paul

Same Domain link is loading in top iFrame and not on whole page

We have a header on our main website (Site #1) that is then fed to another website (Site #2). The header has a "My Account" link that is supposed to belong to site #2. When you click on from site #1 it loads full page same window correctly. When you go to site #2 and click the button it loads ONLY in the iframe at the top of the page (essentially the same area that is holding the header).
Site #1 is www.saclibrary.org
Site #2 is www.saclibrarycatalog.org
The original link that is supposed to be there for the my account link is https://find.saclibrarycatalog.org/iii/encore/myaccount
To get it to work for now I had to change the link to a redirect page on the first site, then have that page auto-redirect back to the second site's my account page. The urls in the iframe work correctly for any link that is not the same domain (saclibrarycatalog.org). That's why my work around works, but the original link in the same domain does not.
I've found a lot of places online telling you how to make a link load only in the iframe and not in full same page, but not the other way around, and I can't seem to reverse engineer any of those tips. Another web developer I talked to said it was a browser issue, but we have not done any updates to the browsers on the computers here. We are running firefox 25.0.1, and IE 9.
Thanks in advance!
You should really modernize your method. Using php, asp or cgi (depending on your hosting server capability) will allow you to split your header from the rest of your page (as for the footer and any other part). So loading your page and checking the requested URI, you can decide what is shown, when, and even don't load certain parts of your page.

Displaying a page preview and manipulate it in another site

I'd like to show the user a small preview of another page (from a different domain) and let him control the page's elements. For example: replace the logo on the top.
I tried two approaches:
Using an iFrame causes me cross domain issues.
I can't "preinstall" javascript functions on that page either.
Would love to get more ideas.
Thanks!
You can refer to http://jsbin.com/
The output div has a iframe where your page cloned from other domain.
On the other hand you should have your admin interface where user changes anything change the HTML of the iframe content (as it is a clone not directly from other domain browser allows you to modify). So a live preview can be shown to user.
Here, for how to change the iframe HTML u have many examples otherwise refer to the jsbin.com code.
I just came across this article. This might help you. http://www.sitepoint.com/how-to-safeguard-your-site-with-html5-sandbox/

HTML5 Canvas Example Screenshots

I have come across html2canvas thanks to a previous question of mine. What I am confused about is how could I implement it to do the following:
Create a live thumbnail of a live website.
When the live thumbnail is clicked it loads a bigger image of the website.
What would be the best way to feed the uri's into the script?
All images will have specific hxw set in the image tag or the css for the specific class.
If the website you are trying to create a thumbnail for is different from the actual page the user is on, you'll need to first download the HTML of the page to your server (same origin), after which you can wrap it inside an iframe and create a screenshot of that.
The screenshot generated will be 1:1 size with the actual site, so to create a thumbnail you'd have to resize the screenshot.
The script doesn't accept HTML, url's or anything else except for DOM elements as an input for rendering a page. As such, the only way you can generate a screenshot using the script is to have it either load on the page where you want the screenshot to be generated or load the page within an iframe (under same origin, so you'll need to download the source through a proxy if you use cross-origin).

Categories