I have a php page where I'm trying to load and then echo and external page, (which is sitting in the same server but in complete different path/domain, if that matters).
I've tried using both file_get_contents() and curl. They both correctly load the html of the target page, the problem is that it's not displaying correctly because that target page has relative links to several files (images, css, javascript).
Is there any way I can accomplish this with PHP? If not, what would be the next best way? The target site must look like it's being loaded from the initial page (URL-wise), I don't want to do a redirect.
So, the browser would show http://example.com/initial-page.php even though its contents come from http://example2.com/target-page.php
EDIT:
This is something that could easily be done with an iframe but I want to avoid that too for several reasons, one of them is because with and iframe it breaks the responsiveness of the target site. I can't change the code of the target site to fix that either.
In the end, the solution was a combination of what I was trying to do (using curl) and what WebRookie suggested using the base html tag in the page being loaded via curl.
In my particular case, I pass the base URL as a parameter in curl and I echo it in the loaded page, allowing me to load that same page from different websites (which was another reason why I wanted to do this).
Related
Let's say, that I want to demonstrate a widget (or some HTML in a frame) that would be "injected" into another page.
For example: I want to show the people in Amazon.com that I can put let's say a ball image underneath every price tag they put on their web page. That is - I want to build a web server (or indeed a server less html web page) that would show their page and put some stuff of mine inside theirs. So it looks as if the client (Amazon.com here) has my software already installed on their server.
I am a web-dev total newbie, so if this is the simplest thing in the world please, ..
Thanks
There's TONS of special cases that can cause this to fail, but I'll present a simple way that will work for you on a decent amount of webpages(but not all).
save the webpages html source into a local html file.
edit the html source, adding a <base href="http://www.amazon.com/"> tag into the <head> element.
make any other modifcations to the page you want, such as adding new <script> tags to support your new functionality. Make sure your modifications use absolute urls.
If they navigate away from the page, your enhancements will obviously not carry onto the next page. ALso, you will have more success if you upload the file onto a web server. While a user can view the page by double clicking on the html file if they were to save it locally, differences in javascript security permissions will likely make some webpages not function correctly.
The reason you need to add the <base> tag is because the browser resolves relative urls by looking at the url in its address bar. So, if the amazon page had an image like this
<img src="logo.png">
and you saved the html and put it on you webserver at www.example.com, the browser would look for the image at www.example.com/logo.png, which clearly doesn't exist. The base tag tells it what base url to use.
If you need more automation, having them install a browser addon would be a good way to do this if your users are somewhat technical. Greasemonkey is a popular addon, and you can tell it to inject stuff into certain webpages. The benefit of an addon is that it can inject the new functionality into any page on the web, without you having to individually save and modify them. Also, it has the potential to work on all web pages, leaving their functionality perfectly in tact, opposed to the other suggestion. This is far more complicated though.
Let me know if this question needs more clarification.
I am a front-end developer, and I usually use Wordpress with lots of custom fields to put together a CMS for clients.
A current client wants a design portfolio site that initially presents a grid of images that link to projects, but instead of loading a new page on click, the new content loads and fades in smoothly.
I figure the simplest way to do this kind of thing is to load everything up front on one page with ajax (a loading screen is OK), and then just show/hide/move content with jQuery.
The request I am having trouble with is being able to have specific URL's for different projects and images. The client wants a URL scheme like here:
http://collins1.com/work/bp-helios-house/3
Where the number at the end causes a specific image to load in the given project. It seems like this would be simple enough using php variables where like:
http://www.whatever.com?project=3&image=2
And using those to manipulate the initial AJAX load.
But how is this accomplished using a more traditional (pretty) URL structure like the example? If I am building the site as one page loading content, won't the browser attempt to load that as a page and just come up with a 404?
Bonus: How do you change the URL in the address bar to create these links as the user navigates the site without reloading the page?
Thanks!
what you see there, is called url routing. Basically, some server rule that rewrites the url in a proper way, depending on server and scripting language used.
for example, the url
http://server.com/foo/bar
MAY be redirected to
http://server.com/index.php?foo=bar
If you need a lightweight framework to handle this, take a look at www.slimframework.com
If you want real pretty urls you are going to need a server-side framework for url routing and will require you to get into php or ruby on rails. If you want a pure front end solution you can fake it in javascript using hash fragments. For how to do this see
http://backbonejs.org/#Router
http://www.asual.com/jquery/address/
http://benalman.com/projects/jquery-hashchange-plugin/
I'm looking for a way to load a full-functional copy of a web site inside a php proxy page in order to be able to grab and change part of its elements and styles.
I decided to post this question to merge my previous two into a more relevant evolution:
live change any site visualization properties
load external site and change its visualization
I have found cURL functions useful to load the page (eg. www.google.it; for google.com I received a 302 redirection, but I won't face it now).
Some of the page elements, like the image logo, are not properly loaded; this should be due to the original relative path to the site resources. I have to manually add "//google.it" before them to fix, and it worked.
Now I have another issue:
How is it possible to go further in the site navigation?
When I click any link the page is reloaded with its "real" destination. I suppose I have to reload my php and use the href link attribute as url to load (I can do that).
But what about the submit buttons? How can I redirect their destination?
Use an existing proxy for that.
Generally you'll have to just find all the strings matching the old domain name and change them into your url, so every link on the page will turn from being www.bla.com/page.htm into proxy.com/page.htm.
This will also require some server setup thanks to possible ajax requests and relative paths. Besides, super hard would be to catch dynamically constructed url's such as: var add r = 'b'+'la.com';
As some of you may know, Google is now crawling AJAX. The implementation is by far something elegant, but at least it still applies to Yahoo and Bing AFAIK.
Context: My site is driven by Wordpress & HTML5. An Custom Post Type has tree types of content, and the contents of these are driven by AJAX. The solution I came for not using hashbangs (#!) until fully understand how to implement them is rather "risqué". Every link as HREF linking to *site.com/article-one/?tab=first_tab*, that shows only the contents of the selected tab (<div>Content...</div>). Like this:
This First Tab
As you may note, data-tab is the value that JavaScript sends with AJAX Get, that gets the related content and renders inside a container. At the other side, the server gets the variable and does a <?php get_template_part('tab-first-tab'); ?> to deliver the content.
About the risqué, well, I can see that Google and other search engines will fetch *http://site.com/article-one/?tab=first_tab* instead of http://site.com/article-one/, making users come to that URL instead of showing the home page with the tab content selected automatically.
The problem now is the implementation to avoid that.
Hashbang: From what I learned, I should do this.
HREF should become site.com/article-one/#!first-tab
JS should extract the "first-tab" of the href and pass it out to $_GET (just for the sake of not using "data-tab").
JS should change the URL to site.com/article-one/#!first-tab
JS should detect if the URL has #!first-tab, and show the selected tab instead of the default one.
Now, for the server-side implementation, here is where I'm kind lost in the woods.
How Wordpress will handle site.com/article-one/?_escaped_fragment_=first-tab?
Do I have to change something in .htaccess?
What should have the HTML snapshot? My guess is all the site, but with the requested tab showing, instead of showing only the content.
I think that I can separate what Wordpress will handle when it detects the _escaped_fragment_. If is requested, like by Google, it will show all the content plus the selected content, and if not, it's because AJAX is requesting it and will show only the content. That should be right?
I'm gonna talk third person.
Since this has no responses, I have a good one why you should not do this. Yes, the same reason why Twitter banged them:
http://danwebb.net/2011/5/28/it-is-about-the-hashbangs
Instead of doing hashbangs, you should make normal URIs. For example, an article with summary tab on should be "site.com/article/summary", and if it is the default one that pops out (or is it already requested) it also should change to that URI using pushState().
If the user selects the tab "exercises", the URL should change to "site.com/article/exercises" using pushState() while the site loads the content throught AJAX, and while you still maintain the original href to "site.com/article/exercises". Without JavaScript the user should still see the content - not only the content, the whole page with the tab selected.
For that to work, some editing to the .htaccess to handle the /[tab] in the URL should be done.
I am building an AJAX deep-linked site.
I want PHP to load all the HTML code of the page if the user is trying to access the site with a Javascript non-supported browser or if it is a search crawler. Basically PHP will return the whole page.
On the contrary, when the user is trying to access the site with Javascript supported browser, I want PHP to return only the template code, and let Javascript (AJAX) take care of the rest. Basically PHP will only load design elements and let Javascript populate them with content.
I looked into PHP's get_browser() function, however it seems it is not such a reliable tool. What is the industry's practice see if the browser supports Javascript or it is a search crawler using PHP?
Background:
Why I want the site to have this behavior.
Since I want the home page to load just by loading the address: example.com, which does not send any query to PHP, PHP returns the HTML code of the home page. This however causes issues when the user tries to load the following page: example.com#foo. So, for this example, PHP will return the home page and once the home page is loaded, Javascript (AJAX) will change the content around so that it shows proper content for #foo. This will make the user to see the home page, therefore load time will be slower and user-experience will not be so nice. However if my PHP script can figure out that if the use with Javascript supported browser is trying to load the page, it will only return the template of the web site, which has no content) and the javascript will populate that template with content whatever is supposed to be displayed for #foo. On the other hand, if the Javascript non-separated browser or a crawler will try to access the page example.com#foo, home page will be returned.
I am using SWFaddress (http://www.asual.com/swfaddress/) library for the deep-linking.
Edit
Thank you guys. I did not think of using <noscript></noscript> before.
Here is what I decided to do. PHP by default will load pages such as example.com or example.com#foo (which is essentially the same as example.com from PHP's point of view since fragments by definition are not sent to the server) blank (just visual template) with <noscript> tag inside for the content of the home page. This way users with javascript will not see the home page and AJAX will populate the content of the page according to the #foo fragment. On the other hand, search crawlers and users without javascript will see a home page.
Thank you again. I think this is pretty simple and elegant solution. If you have any further suggestions, please post a comment or another answer.
You can't do this using PHP. What you can do though is use a noscript tag to redirect to another php page if they don't have javascript:
<noscript>
<meta http-equiv="refresh" content="0; URL=nojavascript.php">
</noscript>
It's not possible to accomplish this in the way you're trying to do it.
It's rare that someone has JS turned off and doesn't know it.
PHP doesn't get passed anything after #, only javascript can do anything with that. So even if PHP could determine if the browser has javascript turned on then it still couldn't read # anyways.
You could include a link inside some <NOSCRIPT> tags that point the user to something like example.com#foo?javascript=disabled.
Unfortunately, browsers do not report whether JS is enabled or not, so there's no way to know from a simple HTTP GET whether or not you should send JS reliant pages.
You should just build an AJAX query that sets a session variable for javascript enabled.
Run this AJAX query before any other information on the site is loaded and then do a simple redirect to the actual site.
You could do something like this pseudo code:
Index.php:
ajax(check_js.php);
redirect(main_page.php);
check_js.php
$_SESSION['js_enable'] = true;
main_page.php
if($_SESSION['js_enable'] == true) {
//execute page
} else {
header("Location: no_js_error.php");
}
Instead of the server trying to sniff our the user's settings, how about using unobtrusive javascript in the first place? This way, the page will degrade gracefully (to the desired state) if JS is not available.