JavaScript, Check if website is rendered and displayed on the screen - javascript

I was wondering if there are any methods to check if a website is successfully displayed or rendered on the a user's system.
The application of this is to to deliver a content if and only if it is a real user rather than a crawler/spider fetching the content.
so the check would be:
-check if the content is rendered/displayed,
-execute the next script
-otherwise
-do something else
any help is highly appreciated.
Cheers

Most crawlers simply do not execute any JavaScript, but you cannot really rely on that since it's easy to imagine a sophisticated company creating a search engine that actually does mimic a JS-enabled browser. Many crawlers have an easily identifiable user-agent string, but you cannot rely on that either.
You could do something, I suppose, like attempt to poll for the mouse x,y position a couple of times, looking for values other than 0,0, which is likely to indicate a person with an actual computer and pointing device is at the other end. That still may not get what you want for touch screen devices though. You might also consider waiting until you detect a scrolling event if your secondary scripts don't need to load right away.

Related

Are Javascript popup boxes (Alert, confirm and prompt) part of 'document' or part of 'Browser' (Client)

First of all I apologies if am not aware of similar questions been answered, if so please enlighten me so I can refer and learn (In case they satisfy context of my problem).
So, context is my question is completely based on Autoplay Policy Changes. Right now this policy imposed to take down unwanted stuff or advertisements to be auto played without user's consent. Possibly causing security threats and bandwidth consumption specially on mobile devices.
The only solution to make it work for some legitimate use is to make user interact with website. That's cool, I tried to accomplish this by showing an 'alert' box, but it is not satisfying that criteria (Make user interact first). Rather if I add a button to the document body and click on it, then the criteria match I can listen the audio I want to play on page load.
So I wonder whether these boxes are alien to DOM ? or do they belongs to client only?
I appreciate in advance for any solution which could have been obvious, pro, immature or lay man's knowledge for me to realize. I am a learner.
As JavaScript is Client-Side, the popup boxes are part of the browser (= environment). That is why the alert() function's complete name is window.alert(). They are not part of the DOM.

How to detect if an element is visible within an iframe that is on a cross domain parent

Just as the question states, I have an iframe that is on a cross domain parent. I need to trigger an event if that content is scrolled into view or already in view on page load. Normal checks for distance from top/side of page and viewport height/width don't seem to work as they measure the page within the iframe itself.
I cannot edit/add anything on the parent page to enable this functionality, everything must be within the iframe itself.
The reason behind this is to record whether content has ever had the chance to be viewed by the user or if it was loaded out of view and kept there.
There are companies who provide this service for advertising, but as far as finding out how it is actually done, well it seems to be one of the dark arts.
Any help would be greatly appreciated.
EDIT: Two examples of the companies I spoke of who offer this service.
View the first tick under (4)
http://www.doubleverify.com/what-is-verification/
First thing they state they can do on the right hand side http://adxpose.com/home.page
spider.io does this probably using browser timing attacks. there is a video on their page:
http://www.spider.io/viewability/
here is a nice report on how some browser timing attacks work: http://www.contextis.com/documents/2/Browser_Timing_Attacks.pdf
Simple answer is, you can't.
You have no way to access a cross-domain iframe (DOM or window object) with ECMAscript because of the Same Origin Policy.
Are you sure those examples are exclusively iframe based? Maybe they need to add some javascript to the parent Window.
If you really need this, and 100% accuracy is not needed, I would try some time based techniques on the assumption that most browser will optimize graphical work happening out of view.
Being realistic I don't think it would be possible to get good results with that techniques in a reasonable time or expecting a general robust cross-browser solution. It would be quite fun though.
doubleverify and adxpose use "offline" techniques to determine if the ad was visible or not, it doesn't happen on the page view. If they did it through Javascript, all you would have to do is look at one of their pixels to see how it works.

Maintain height of the website

I have a client who wants to do a website with specific height for the content part.
The Question:
Is there any way that when the text is long / reach the maximum height of the content part, then a new page is created for the next text.
Within my knowledge, somehow I know this can't be done.
Thanks for helping guys!
You will probably want to look into something like jQuery paging with tabs
http://code.google.com/p/jquery-ui-tabs-paging/
Unfortunately you would need to figure out the maximum number of characters you want to allow in the content pane and anything after that would need to be put into another tab. You can hide the tab and use just a link instead.
Without more knowledge on what you're development is, this is a difficult question to answer. Are you looking to create a different page entirely, or just different sections on a page?
The former can be done using server-side code (e.g. Rails), and dynamically serving out pages (e.g. Google results are split across many page).
The latter can be done with Javascript and/or CSS. A simple example is:
<div id="the_content" style="overflow:hidden;width:200px;height:100px">
Some really long text...
</div>
This would create a "scroll" bar and just not disrupt the flow of the page. In Javascript (e.g. JQuery), you'll be able to split the content into "tabs".
Does this help?
(Almost) everything is possible, but your intuitions are right in that this can't be done easily or in a way that makes any sense.
If I were in your position, I would go up to the client and present advantages and disadvantages to breaking it up. Advantages include the fact that you'd be able to avoid long pages and that with some solutions to this problem, the page will load faster. Disadvantages include the increased effort (i.e., billable hours) it would take to accomplish this, the lack of precedent for it resulting in users being confused, and losses to SEO (you're splitting keywords amongst n pages).
This way, you're not shooting down the client's idea, and in the likely case the client retreats from his position, he will go away thinking that he's just made a smart choice by himself and everyone goes away happy.
If you're intent on splitting it up into pages, you can do it on the backend by either literally structuring your content into pages or applying some rule (e.g., cut a page off at the first whole paragraph after 1000 characters) to paginate the results. On the frontend, you could use hashtags to allow Javascript to paginate the results. You could even write an extensible library that "paginates" any text node. In fact, I wouldn't be surprised if one didn't exist already.

Detect if the ctrl button was pressed

I want to prevent users from printing a page
I thought I would set the screen to not include the toolbars, and prevent right clicks, and prevent Ctrl+ P, and the Print Screen button.
Can this be done?
Is there any good code out there for this? I have searched quite a bit so far, but not much luck. I know this isn't foolproof, but it will prevent some users from copying or printing.
You can't do this...you can't disable the user's ability to print, nor should you try.
Ctrl+P is the way a programmer prints, File > Print (depending on browser) is the way the typical user does...so this wouldn't even disable the most common method. In addition, any decent programmer can get around this anyway, so it effectively doesn't stop anyone.
Any data you get to a user, displayed or not, they can see, copy, print, etc...there's nothing you can do to prevent this, definitely not 100%. If this is one of your requirements...you should be asking if a website is the best way to deliver this data.
By doing that, you will annoy legitimate users, and if you think a serious copyright violator uses a regular browser (whose printing function you can disable), then you're very mistaken.
On the one hand information wants to be expensive, because it's so valuable. The right information in the right place just changes your life. On the other hand, information wants to be free, because the cost of getting it out is getting lower and lower all the time. So you have these two fighting against each other. source
Also:
Information Wants To Be Free, and Code Wants To Be Wrong.
I agree with the answers above.
Users will always find a way around this,
- A computer is not secure for copyrighted material and will never be.
you need to take that into account.
If you'd want to make it so that regular computer users can't do it this would help:
Create an application that loads and displays the document after input of a keycode that you supply (check via webserver).
the application does not have printing functions since you did not put them in
register a global keyhook to blank the document if the user presses "printscreen" and show a copyright warning
A couple of years ago, I built an exam system where one of the requirements was to make it hard for people to print the exams. Removing the print functionality is as we know, impossible (unless you do some changes in the browser software). What you can do is to make it harder for non-technical people to print the page. E.g. Use CSS to blank the page when it goes to the printer:
<style type="text/css">
#media print {
body { display:none }
}
</style>
The following jQuery script will prevent copy&paste in some browsers:
$(document).ready(function () {
$(document).bind('copy paste', function (e) {
e.preventDefault();
});
});
the #Nick Craver answer is right, you can't prevent it but anyways if you want to detect the key combination using mootools you have the keyboard class that let you define key combinations and add events to it:
http://mootools.net/docs/more/Interface/Keyboard
that maybe will be useful to display a warning or something like that :)
You could so with jQuery for example. However think of this: a browser runs on a client pc which is owned by someone. That person should be in control of what happens on his/her device. It's not up to you to start putting scripts to get rid of standard functionality the enduser might want to use.
If you don't want something to be printed then don't show it on a public place. If it's confidential, treat it as such.
Grz, Kris.
Take this into account. I agree with the other answers and present another way around this. All the user must do is take a screenshot, which involves the application layer of the operating system, and one of which you cannot even hope to change. On Ubuntu, it's even in the user's main menu to do this.
<script type="text/javascript">
function detectspecialkeys(e){
var evtobj=window.event? event : e
if (evtobj.altKey)
alert("you pressed 'Ctrl'");
evtobj.preventDefault();
}
document.onkeypress=detectspecialkeys
</script>

image protection in rails

I am looking for ways to protect my product images and I don't know if there's anything out there better than what I've already found: disable right click, use a transparent image in front of your picture and watermarking. Obviously none of them is perfect but I was curious if someone came up with a better solution to this problem.
Also is there any rails plugin to aid with that ?
Thanks
I really, really hate blocking right mouse click. It reminds me nineties when on right mouse click you get message that coping of this site is forbidden ;).
You can't protect your picture. For me the best way is just to put some copyright information and that's all.
There is no way you can do that at all, that is just smoke.
When you uses images in your website, they are downloaded to the client and they can be found in the cache, even if you try to block the user from right clicking and saving it.
They can even look at your html/css/javascript find the location for your picture and put that in their address bar.
You can't stop people from pinching images on the internet, so don't waste your time trying. Instead use a combination of strongly worded copyright messages underneath the image, and only store low-resolution files on the server.
For a photography site I've built in Rails, I have Paperclip trash the original high-resolution photo after it has generated a selection of smaller thumbnails. Combine it with a watermark in a corner of the image and you should have enough to make it a pain to steal a high-quality image, while not inconveniencing users.
Frankly, if I was to visit your website and you'd disabled right-click, I'd be gone in a matter of seconds.
I was looking for something similar, but for random images. I have not found anything so I thought I'd contribute here.
My last solution, using signatures, is something that could be applied here, though with some modification which I have also included at the bottom.
We should differentiate between (at least) two things:
A. Prevent someone saving images from within their browser.
B. Prevent someone writing a script to rip all of your images automatically.
Solutions:
A.
Pretty much impossible and also not what you want. Imagine a website that hassles you when you try to use your browser the way it was meant to be used. Right you'd be unhappy. There are perfectly legitimate reasons for someone to want to save an image, the most basic and flattering one would be to use it as a wallpaper on their computer or phone.
The best solution would be to include a watermark. That way people are reminded of where the images are from and they can still use them for private things.
I think this general rule applies on the internet: if you don't want it to spread outside of your control and you receiving credit: don't put it online.
B.
This is a less nice scenario. The most basic thing I've once done to make ripping images somewhat harder is to a. use unpredictable urls to images and b. create a script on your server that when called will fetch an image from your file system and then output this image. For example: http://example.com/some_image.php The code is really simple:
<?php
$name = './img/ok.png';
$fp = fopen($name, 'rb');
header("Content-Type: image/png");
header("Content-Length: " . filesize($name));
fpassthru($fp);
Source: SO answer on the topic
So what I have done once is I created a script like above, but added a timing option in there so that calling it (from the same session) twice within lets say 10 seconds would return the same image. This way an automated script could only go as fast as 1 image every 10 seconds. Additionally you could make the url contain some sort of timestamp hash:
http://example.com/some_image_$(md5(Time.now + "secret")_Time.now).png so for example:
`http://example.com/some_image_aihfio1n...oi12nof_1396723820.png
What you'd do to check if fetching the image is allowed is:
You take the requested file name, strip off 'some_image' and then the md5 hash. You then check if the given time ('1396723820') is within now and 10 minutes (allow for fluctuation). Then check if the hash is correct for that timestamp + 'secret'.
You can see this as a signature that is sometimes used in digital communication, although very basic and not very strong or anything.
Using this method for your production images could be something like this:
http://example.com/some_image$(md5($image_id, "secret",$timestamp))_$image_id_$timestamp.png
$image_id here is some sort of static identifier for your image (file_name, id of the product in your db, etc).
Please anyone, correct me if my assumption that this makes it harder to predict file paths is incorrect. In the end, the first rule to creating encryption patterns is "don't do it". So is the second. But this is a fairly innocent one to play around with.
have a look on how commercial image suppliers (like iStockphoto.com) protect their images that and see if that fits your need.

Categories