How to create a redirecting domain? - javascript

This post is just to learn something, Recently I came across a domain called as www.content-queen.me/PtWkz in a page from facebook.com, on clicking the post with this link it redirected me another domain http://www.wittyfeed.com/story/18644/when-9-cops-sat-down-at-red-robin-the-waitress-realized-something-is-terribly-wrong?utm_source=undefined&utm_medium=SOCIAL&utm_campaign=33-campaign&utm_hash=PtWkz&i=2...Initially I dint see it, but the next time I did with another url, the same thing happened..so my question is how to do it, I know how create a redirect, as it can be done in .htaccess, but this kind of redirect is very new and interesting, And I even tried to dissect the code and found this source code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<meta charset="UTF-8">
<title>When 9 Cops Sat Down At Red Robin, The Waitress Realized Something Is Terribly Wrong</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="When 9 Cops Sat Down At Red Robin, The Waitress Realized Something Is Terribly Wrong" />
<meta property="og:description" content="You never know when any deed done by you can make anyone's day. Hence, being on the good side of the threshold is always preferable. Jessica Dunbar definitely understands the effect good actions have and she is definitely doing everything the right way. Especially, when it is about men in uniform. When she notices a group of cops sitting in her section, this happens." />
<meta property="og:url" content="http://www.content-queen.me/PtWkz" />
<meta property="og:image" content="http://cdn.wf-media.com/18644/pvoaelaw7buvswooe47x.jpeg" />
<meta property="og:site_name" content="www.content-queen.me" />
<meta property="article:section" content="Pictures" />
<a href="https://www.viral9.com/tr_hs_vs/PtWkz" id='myLink'></a>
<style type="text/css">
#myLink {
display: none;
}
</style>
</head>
<body>
<div id="output">
</div>
</body>
</html>
<script type="text/javascript">
// view_count_update();
function view_count_update()
{
var jUTM = "utm_source=SOURCE&utm_medium=referral&utm_campaign=CAMPAIGN&utm_hash=HASH";
var redirect_url = "http://www.wittyfeed.com/story/18644/when-9-cops-sat-down-at-red-robin-the-waitress-realized-something-is-terribly-wrong?utm_source=SOURCE&utm_medium=SOCIAL&utm_campaign=33-campaign&utm_hash=PtWkz&i=2";
redirect_url = redirect_url.replace("SOURCE", document.referrer.split('/')[2]);
window.location = redirect_url;
}
function myFunc(){
}
//hello
</script>
<script>
try{
(function(){
var d = {
'user_id' : "33",
'url_id' : "2609257" ,
'advertiser_id' : "1",
'user_agent' : navigator.userAgent,
'campaign_id' : "18362" ,
}
$.ajax({
url: "http://www.asapoo.com/mysql_testing",
type:'GET',
data: d,
success : function(data) {view_count_update();},
error : function(){ view_count_update();},
complete: function() {view_count_update();},
timeout : 2000
});
})();
}catch(e){ view_count_update(); }
</script>
<script src="//c.fqtag.com/tag/implement-r.js?org=T6tuwESp3TrUwruYu4eZ&p=NOTSET&a=33&cmp=PtWkz&rt=display&sl=1&fmt=banner&ctu=http%3A%2F%2Fwww.wittyfeed.com%2Fstory%2F18644%2Fwhen-9-cops-sat-down-at-red-robin-the-waitress-realized-something-is-terribly-wrong%3Futm_source%3DSOURCE%26utm_medium%3DSOCIAL%26utm_campaign%3D33-campaign%26utm_hash%3DPtWkz%26i%3D2&fq=1"></script>
I hope there will be guys who would have done this here and would like to learn how to do it.

That code is pretty much it, really. The redirects are coming from a site set up just for that. It most likely has a database driving it, mapping those random strings of letters to sites. Then it had a template for the page you posted here where it fills in values from the database.
You can see in the code where it updates a page view counter. Then, right after that it sets window.location to where they want you to go, which makes the browser load the page.

This is called a url shortener, you need a back-end script to do the redirect.
The application works as follows, when a request for www.content-queen.me/PtWkz, it will analyze the url. and take the random string PtWkz as a key, this key is connected to the orginal url and the relation stored somewhere in database or cache memory.
What the script do is to match the short string to the orginal url and send to our browser http redirect 302.
There are some feathers to the shortener like you can change the destination the original url with keep sharing the short url.
The back-end script can be written in all programing languages and scripts, you may use python or php for it.
There are many online url shortener services like goo.gl and bitly.com.

Related

Saving an offline single html page application - dynamically filled with crud javascript - on client side only

I'm very new here and hope I can express myself clearly.
I'm a teacher and I'd like to create a single html file with interactivity (kind of empty form) that can be loaded without any server : student should for example be provided a file like myform.html.
This means html, css and javascript should all be in the document.
Once the students have opened and filled their names and answers, i'd like them to be able to save locally the modified document as another .html - Let's say johndoeform.html - file.
If I load a simple html file from my local storage and I fill - for example textareas - and try to save the modified page with "save as" in my web browser (safari) I get the unmodified page when I open it again.
I'm aware that an app that stores a lot of datas should rely on a server and data base app. But for a simplistic form/quiz that really should be loaded without any additional software nor an internet connection I feel that this way should be more straight forward.
I'm a noob with java script and I've seen quite some things around about generating blobs with html content but I'm not sure how to get the whole modified document, generate a blob with it then save the whole thing via a new html document.
Perhaps a JS generated download link could do the trick ?
For the purpose here's a simple example of code I could use :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>Search on wikipedia</h3>
What's the difinition of ENERGY:<br>
<textarea id="energyDef" placeholder="Write your definition here and save your work" cols=40 rows=6>
</textarea>
<p>Click the button to save as an html file.</p>
<button type="button" onclick="saveHtml()">Save</button>
<script>
function saveHtml() {
// how can I generate and export the whole modified page from here
}
</script>
</body>
</html>
Let me start by giving the answer and saying you probably shouldn't do this and instead below for reason and better solutions
You can take the value of the textarea and directly modify the innerText of it to hard code the answer into the html and then simply export it by using a blob
You can add classes to the answer field and loop through it so that you wouldn't have to manually enter the code for each field.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>Search on wikipedia</h3>
What's the difinition of ENERGY:<br>
<textarea id="energyDef" placeholder="Write your definition here and save your work" cols=40 rows=6></textarea>
<p>Click the button to save as an html file.</p>
<button type="button" onclick="saveHtml()">Save</button>
<script>
function saveHtml() {
answer_field = document.getElementById("energyDef");
answer_field.innerText = answer_field.value;
var a = document.createElement("a");
var file = new Blob([document.documentElement.outerHTML], {type: "text/plain"});
a.href = URL.createObjectURL(file);
a.download = "dump.html";
a.click()
}
</script>
</body>
</html>
A better way would be to export the data as a machine readable file like JSON , and implement a simple drag and drop to load the data back if you need it as shown in the html file.
Having it as a machine readable format would allow a much easier time to import into a database in the future or simply allow you to easily be able to write a script to get percentage of correct answer for a given question by the class for simple fixed answer
It would also allow you to quickly glance just the answers with a simple notepad program if proper formatting was used in the export process, ie the "space" parameters in JSON.stringify()

I keep getting the error:require is not defined

<!DOCTYPE html>
<html lang="it">
<title>Gamefic</title>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1><strong><em>TEST</h1></em></strong>
<input id= "text" type="text" value="" placeholder="Inserisci la tua idea qui"> <br> <br>
<input id="button" type="button" onclick="c()" value = "premi questo pulsante">
<button onclick="BB()">Test</button>
<p id="b"></p>
</body>
<script src="script.js"></script>
<script> function BB(){
var fs = require('fs')
fs.appendFile('IDEE.txt', 'Hello!', function(err, data){
console.log(data)
})}
</script>
</html>
If somebody knows how to fix this problem or how to implement fs in HTML code I would appreciate it very much.
I have tried almost everything.
Thanks
require is not part of Javascript's standards. That part of code that you have, namely
function BB(){
var fs = require('fs')
fs.appendFile('IDEE.txt', 'Hello!', function(err, data){
console.log(data)
})
}
looks very much like NodeJS code that is to append some content to a file on your server's filesystem. However, this is only supported on your server, not in your browser. This might be confusing if you work on your machine and use a browser in the same machine, but don't think about this considering your special case as a developer. Instead, think about the users. Your server's code, the NodeJS will run a remote machine from the users' perspective, while that server will send out the web-page to their browser whose job is to display it.
Now, browsers do not really allow file writing on users' file system in general, because in that case a malicious server could cause a lot of harm for the users. So, in order to avoid these dangers, file operations via the browser is very limited.
The proper way to work with files is to develop some server-side code, in your case that would be Javascript under NodeJS, judging by your code and that server-side code should be triggered by a request sent by the user where a message would be sent. The server, on its turn would take that message and append to the file after proper validations, of course.

Document.write and windows.location together in IE is not working

I'm having a strange behavior and I'm fighting with myself in order to figure out what error can be.
I have an HTML page that, on body load, checks for the presence of a Variable "TRANSACTIONVALUE" in query string.
If the string is present and has specific value (8374), user is redirected to a specific page (let's call it "backend page").
Due that sometimes this "backend page" is a bit slow (it fires an agent that sometimes goes down for inactivity, so need to wait to reactivate it), i resolved it just adding a document.write that says just "Request in course... Please wait" in the same blanked page before the redirect.
My code is working for ALL browser, except for Internet Explorer where users are blocked in the first statement "document.write".
<!doctype html>
<html lang="us">
<head>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML;CHARSET=UTF-8">
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<META HTTP-EQUIV="EXPIRES" CONTENT="-1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<script>
function CheckHeaderStatus() {
if (getQueryVariable("TRANSACTIONVALUE")==8374)
{
document.write("Request in course... Please wait");
window.location.href='http://backendapplication.goto.com/Default.aspx?TARGET='+TRANSACTIONVALUE;
}
}
</script>
</head>
<body onload="CheckHeaderStatus()" class="text-center">
<div> any text <div>
</body>
</html>
What happens is that it works for Chrome, Safari, Firefox. In these cases if an user has the TRANSACTIONVALUE=8374, on body load he can see the "Request in course... Please wait" message and then is redirect to the page http://backendapplication.goto.com/Default.aspx?TARGET='+TRANSACTIONVALUE
Now, in Internet Explorer users with TRANSACTIONVALUE=8374 can see ONLY the "Request in course... Please wait" message. The page stop to go head and so they are not redirect to the other page.
What can be the problem?
I have tested other way to obtain the same (as proven of my work) like:
"Remove all content from the page, create a div where I can write the massage of waiting, and then redirect, so:
while (document.firstChild) {
document.removeChild(document.firstChild);
};
// create new DIV
var newDiv = document.createElement("div");
newDiv.innerHTML = "<h1>Request in course... Please wait</h1>";
window.location.href='http://backendapplication.goto.com/Default.aspx?TARGET='+TRANSACTIONVALUE;
but again, it works for all browser expect for IE. I tested with IE9,10,11.
I'm missing something or it is a problem of IE?
Thanks all!!!
I have resolved in this way:
function CheckHeaderStatus() {
if (getQueryVariable("TRANSACTIONVALUE")==8374)
{
Redirect();
function Redirect() {
document.write("Request in course... Please wait");
window.location.href='http://backendapplication.goto.com/Default.aspx?TARGET='+TRANSACTIONVALUE;
}
}}
In this way it works also for IE :-)

Can I load JavaScript Functions on One page then redirect to another?

I have an old application that I can not modify in anyway including editing the HTML in anyway directly. I had to create a redirect html page for people to load in order to always get everyone to the correct location.
Can I load a JavaScript on Page one, and keep it loaded?
I.E.
<html>
<head>
<script type="text/javascript">
function getMyAppProductID()
{
//Do the Java action to find the Product ID.
}
</ script>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<META http-equiv="refresh" content="0;URL=http://MyAppURL.internalUrl.local/StartupScript.jsp">
<title>Load...</title>
</head>
<body>
<p>Loading My App</p>
</body>
</html>
Then when I am looking at my application I want to be able to call the function I wrote.
IE. I have a floating button that does the getMyAppProductID Function.

facebook og data not updating

I have created a facebook app with subscription.
When the user opens the app, there is a button called "SUBSCRIBE". When it is clicked, the javascript function completePayment(), is called. The facebook popup with subscribe appears. However, there is a big problem. If I change the og:image URL and set the price to let's say 10.00 USD and the billing period to 1 month and I upload the file to the server and then I click on the SUBSCRIBE button, I can still see the subscription page saying 5.00 USD/week and the image is blank.
It's like everything remained the same way that it was when I first set the data, even though I updated all the data from https://www.mydomain.com/_product.php , with the new values. I even logged out and relogged in, and still no changes are reflected.
I even emptied the _product.php page and uploaded it to the server and the subscription still works and shows 5.00 USD/week and the image is blank.
Any ideas on how to fix this?
I have this code on the main page:
<a href="#" onclick="completePayment()">
<img src="https://www.**********.com/subscribe.png" alt="Subscribe" title="Subscribe" style="vertical-align: top"/>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({
appId:'2***********6',
cookie:true,
status:true,
xfbml:true
});
function completePayment(){
var obj = {
method: 'pay',
action: 'create_subscription',
product: 'https://www.mydomain.com/_product.php'
};
FB.ui(obj);
}
</script>
</a>
This is the HTML code from the 'https://www.mydomain.com/_product.php' page:
<html>
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# fbpayment: http://ogp.me/ns/fb/fbpayment#">
<meta property="og:title" content="********* Subscription" />
<meta property="og:image" content="https://s-static.ak.fbcdn.net/images/devsite/attachment_blank.png" />
<meta property="og:description" content="****** Subscription" />
<meta property="fbpayment:price" content="5.00 USD" />
<meta property="fbpayment:alternate_price" content="3.49 EUR" />
<meta property="fbpayment:alternate_price" content="3.49 GBP" />
<meta property="fbpayment:trial_duration" content="7 days" />
<meta property="fbpayment:billing_period" content="1 week" />
<meta property="fb:app_id" content="2*************6" />
<meta property="og:url" content="https://www.mydomain.com/_product.php" />
<meta property="og:type" content="fbpayment:subscription" />
</html>
The facebook page have a looong if not semi permanent cache about share content:
3 options are possible:
1) try to clear the page cache on: https://developers.facebook.com/tools/debug
but you will fall in the same problem next time you share the page
2) add a dynamic parameter to your url (https://www.mydomain.com/_product.php?q=123), than you will have a unique value associated with this url, but you need to set the og for this specific url with a php_get on the parameter. If you have few value you can make it manually, on the other hands if you have more value or dynamic value you need a DB table to store the data with the link url and the associated og and get the value in the php_get
3) Clear the cache programatically by re-scraping it. See: https://developers.facebook.com/docs/payments/product?locale=en_GB#scraping-object
I've done somthing similar on my site but only with random generated value: http://www.paris-web.it/test.html

Categories

Resources