CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Gabriel Meono
Gabriel Meono

Reputation: 1010

Load external page and Replace text

Would it be possible to load an external page inside a container and replace text elements?

We work with ad campaigns and earn a percentage whenever a user signs up.

Can a script replace certain words? For instance “User” to “Usuario” or “Password” to “Contraseña” without affecting the original website or its functions.

Note: These links always pass through a redirection.

Example:

http://a2g-secure.com/?E=/0yTeQmWHoKOlN6zUciCXQwUzfnVGPGN&s1=

Note 2: Using an iframe is out of the question due to “Same-origin policy”.

Upvotes: 1

Views: 691

Answers (5)

Clomp
Clomp

Reputation: 3308

The answer is NO, not without using a server-side proxy. For a really good overview of how to use a proxy, see this YUI page: https://developer.yahoo.com/javascript/howto-proxy.html (Be patient, as it will take time to load, but the illustrations are worth it!)

When I try to do this in jsfiddle to see what data that the 3 parameters contain, then the error below appears:

$(function() {
    $(this).load('https://stackoverflow.com/questions/36003367/load-external-page-and-replace-text', function(responseText, textStatus, jqXHR){
    debugger;
  });
});

ERROR:

XMLHttpRequest cannot load Load external page and Replace text.

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://fiddle.jshell.net' is therefore not allowed access.

Upvotes: 0

channasmcs
channasmcs

Reputation: 1156

Using the .load() callback function, this will replace the text 

$(function(){
$("#Content").load("http://example.com?user=Usuario",function() {
    $(this).html($(this).html().replace("user", +get param value+));
});

redirection u can use

// similar behavior as an HTTP redirect
window.location.replace("url");


// similar behavior as clicking on a link
window.location.href = "url";

Upvotes: 0

noderman
noderman

Reputation: 1944

It seems you are trying to localize a website on the fly, using your server as a proxy for that content. Does it make sense? If that's the case, depending on the size of your operation, there are several proxy translation services out there (I'll name them if needed).

Basically, they scrape a website, providing a way for you to translate and host the translated content. Of course, this depends on your relationship with the content providers. You should also take this into consideration, since modifying content, even for translation, can be a copyright problem.

All things considered, if you trust the provider's javascript, the solution involves scraping the content, as mentioned in other answers, and serving that modified content. You really need to trust the origin...

update per request

http://www.easyling.com

http://www.smartling.com

http://www.motionpoint.com

http://www.lionbridge.com/solutions/translation-proxy/

http://www.sajan.com/translation-proxy-technology-and-traditional-website-translation-understanding-your-options/

They are all aimed at enterprise-grade projects, but I would say Easyling is the most accessible.

Hope this helps.

Upvotes: 1

Rob Raisch
Rob Raisch

Reputation: 17357

I'm not sure if this answers your question, but you might find it useful.

(Perhaps you might give a step-by-step example of what you're trying to accomplish?)

If we assume that a browser attempts to retrieve page P from a proxy which first retrieves the content of page P from its actual home and then performs some transformation on its content before returning that page content to the browser, what you're describing is a Reverse HTTP Proxy and is a very well-known page serving technique.

Rather than performing complex transformations at the server (which require specialized knowledge of the page layout), this technique is usually used to inject a single line into the retrieved source that calls a JavaScript file to actually perform the required transformation at the browser.

So in essence:

  1. Browser requests Page P from Proxy 1.
  2. Proxy 1 retrieves the actual Page P from its real home, Server 2.
  3. Proxy 1 adds the line <script src="//proxy1.com/transform.js"></script> to the source of Page P.
  4. Proxy 1 then returns the modified source of Page P to Browser.

Once the Browser has received the page content, the JavaScript file is also retrieved, which can then modify the page contents in any way required.

This technique can be used to solve your "Same origin policy" issue by loading an iframe from a URL that points to the same server as that which provided the parent or owning page of the iframe which acts as proxy, like:

http://example.com/?proxy_target=//server2.com/pageP.html

Thus, the browser only "sees" content from a single server.

Upvotes: 2

lshas
lshas

Reputation: 1731

You would need to load the external page server-side, and then you can do whatever you want with it. You can do serverside string replacement, or you can do it later in javascript.

But, remember that as soon as you add a whole webpage into for example a div in your own page, the css from your page will affect it. Plus, you would need to manipulate all the links in the documents, to have absolute urls. If the page depends on ajax, there is pretty much no way to accomplish what you want to do.

If on the other hand the pages you will be loading are static html, it is possible, though there are a lot of things you need to take care of before you can actually present the page to the user, like adjusting links, urls to stylesheets and so on.

Upvotes: 2

Related Questions