How javascript gets someother website data? - javascript

Well i am a bit confused..
I saw a service known as Zopim.. What they do is they provide you with a small piece of code:
such as
<!-- Start of Zopim Live Chat Script -->
<script type="text/javascript">
document.write(unescape("%3Cscript src=\'" + document.location.protocol +
"//zopim.com/?zopim\' type=\'text/javascript\'%3E%3C/script%3E"));
</script>
<!-- End of Zopim Live Chat Script -->
you just need to place it in the footer and ur done..
Can any body let me know how this works and from where i can learn this..
+
how can they even set the CSS with this and also the looks?
Awaiting for your replies...
Thanks

That code is creating a reference to a Javascript script hosted on their server. That reference on your page allows that script to access all the elements on your page (including their styles) through the DOM (Document Object Model) and to change them. All of this takes place in the user's browser.
Edit: Here's an example. Say I have a script on my site at http://www.mysite.com/myscript.js that does this:
document.body.style.backgroundColor = "#00FFFF"
Then you put this on your page:
<script type="text/Javascript">
document.write("<script src='" + document.location.protocol + "://www.mysite.com/myscript.js'></script>");
</script>
Then when a user loads your page, and the user's browser gets to that code, it will write out a script tag that references my script. It will then process that script tag, which basically downloads my script (to the user's browser) and runs it on your page (which is already on the user's browser). My script, in turn, changes the background color of the document (your page, running on the user's browser), because it acts like it was part of your page all along.
By the way, the reason you're using document.write instead of just linking directly to my script is so that if your page uses SSL, so will the link, so the user won't get any annoying messages that my script isn't secure.

This code creates a <script> tag that loads a script from http(s)://zopim.com/?zopim.
The generated <script> tag is a regular Javascript script that can do whatever it wants to.

Related

problem js start script before loading page

I am trying to read and pass cookies using Javascript (fbclid, gclid, utm_source, etc.) from our website's visitors onto a typeform (directly embedded in our website's pages) once the form is filled.
Our website is built on wordpress, and the JS script is contained within a HTML container.
The process I am trying to implement:
A visitor lands on a page
The script reads the visitor's cookies
If/When the form is loaded, the visitor's cookies are passed alongside the form's information (basic contact information) that we then retrieve using Zapier. A specific "zap" is then triggered, containing the form's information as well as the cookies' information.
The problem is that the script that reads and passes the cookies to the typeform/zapier loads before actually getting the cookies.
I tried to put an "if" statement that checks when the page is loaded (the same one used for reading visitors' cookies) but the page then turns blank.
Google also tells me that there is a conflict between document.write and window.load()
Here is the script:
<script>
(function() {
window.onload = function() {
if(!window.location.hash) {
window.location = window.location + '#loaded';
window.location.reload();
var src = "//embed.typeform.com/next/embed.js";
document.write('<script src=' + src + '><\/script>');
}
}
})();
</script>
Any help here would be greatly appreciated!

How to Get Access to Page's Script Context

My addon uses a content script to interact with the page. But it also needs access to the page's javascript so it can run one of the page's routines. So my content script needs access to the page's script context.
Here's what I mean.
Addon uses main.js which access content.js and uses messaging to communicate.
But the web-page (into which content.js is being injected) has it's own javascript. My content.js needs access to that context so it can fetch the values from variables there.
How can one get that?
I have been reading these mdn docs, but it seems like they are talking about an html page that you code yourself, like you would for a preferences page. But in my case I am working with an external website, not something coded just for the addon.
The approach listed on the MDN page also works for external pages, not just your own.
I.e. unsafeWindow.myPageVar will work.
This works:
var script = document.createElement("script");
script.innerHTML = "alert( myPageVar );";
document.body.appendChild( script );
Credit goes to this fellow.
I don't know whether this is the best way to do this, however. I hope that someone else more knowledgeable than me will answer.
Here's how to return a value:
var retval = unsafeWindow.SomePageFunction();
alert(retval);
It's called "unsafe" because you never know what about the page might be changed or might change. That's how it when the addon interacts with page scripts.

How did they hide the JavaScript on this page?

I encountered a webpage that shows a popup, however, the only related JavaScript code I found on that page is the code below. What exactly does this code do and how does it hide the actual implementation (showing the popup)?
<script language="javascript" type="text/javascript">
var script = document.createElement("script");
script.src = "/in.php?referer=" + escape(document.referrer);
script.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(script);
</script>
This code only inject a <script> tag.
When you look in the Chrome dev tools, you'll see the file referenced here in the sources tab.
This javascript file will have this name: "/in.php?referer=" (and document.referrer as value to the query string).
There's really nothing hidden, it's just that this way the javascript file is loaded asynchronously and won't block further script from loading/executing. This technique is often used by third party in order to leave the smallest footprint possible (google maps, twitter, facebook SDK, youtube, etc, etc).

Using Javascript to grab element on remote page

I would like to grab an element from a remote HTML page. As I am requesting data from a different domain I am using the below code to add the source as a script. Yes, very dodgy.
<script type="text/javascript">
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', 'http://remoteDomain.com/page.html');
document.getElementsByTagName('head')[0].appendChild(script);
</script>
The above code fetches and appends the entire page to my document head. Seems to work okay. However now I would like to able to grab an element by ID, or even regex from this source.
Can this be done?
I am aware that the above code is dirty, so I'd be happy to receive any suggestions to clean it up!
Indeed very dodgy... But there are crossdomain AJAX tehniques that you can use. Some help here: http://usejquery.com/posts/9/the-jquery-cross-domain-ajax-guide
The above code fetches and appends the entire page to my document head.
It doesn't really, it just creates a script element of which its src points there.
It looks like you are trying to get around Same Origin Policy.
Can you use a server side proxy?
Browsers go to great lengths to prevent this being done client-side unless the site you're trying to read explicitly opts in.
Otherwise any random web page you visit could read info from your bank account, say.

Redirect document.write from javascript script

We want to serve ads on our site but the adserver we are in talks with has issues with delivering their advertising fast enough for us.
The issue as I see it is that we are supposed to include a <script src="http://advertiserurl/myadvertkey"></script> where we want to display the ad and it will then download a script and use document.write to insert some html.
Problem is that the call to the advertiser website is slowish and the code returned then downloads another file (the ad) which means the speed of rendering our pages slows while we wait for the request to be filled.
Is there a way to take the output from the document.write call and write this in after the page has loaded?
Basically I want to do this:
<html>
<body>
<script>
function onLoad() {
var urlToGetContentFrom = 'http://advertiserurl/myadvertkey';
// download js from above url somehow
var advertHtml = // do something awesome to interprete document.write output
$('someElement').innerHTML = advertHtml;
}
</script>
</body>
</html>
Or anything similar that will let me get the output of that file and display it.
If I understand correctly, you want to capture document.write to a variable instead of writing it to the document. You can actually do this:
var advertHtml = '';
var oldWrite = document.write;
document.write = function(str)
{
advertHtml += str;
}
// Ad code here
// Put back the old function
document.write = oldWrite;
// Later...
...innerHTML = advertHtml;
You still have the hit of loading the script file though.
To decouple the main page loading from the ad loading, you can put the ad in its own page in an iframe or, similarly, download the script file with AJAX and execute it whenever it comes down. If the former is not adequate, because of referring URI or whatever, the latter gives you some flexibility: you could use string replacement to rewrite "document.write" to something else, or perhaps temporarily replace it like "document.write = custom_function;".
You may be interesed in the Javascript library I developed which allows to load 3rd party scripts using document.write after window.onload. Internally, the library overrides document.write, appending DOM elements dynamically, running any included scripts which may use document.write as well.
I have set up a demo, in which I load 3 Google Ads, an Amazon widget as well as Google Analytics dynamically.
You'd run into some security issues going cross domain due to the Same Origin Policy. I would look into JSONP if you have access to change the advertising content/service
http://docs.jquery.com/Ajax/jQuery.getJSON#urldatacallback

Categories