Hide links from html - javascript

Suppose I have several links like
Google
How to remove the link so that user can't use view source to see the link.

It is impossible to hide the link completely from your code. You could handle links via javascript (harder to find the link?).
<a href="#" id="secretLink>Google</a>
<script>
document.querySelector('#secretLink').addEventListener('click',function(){
location.href = YOURDESTINATION;
});
</script>
But i don't recommend to do that.

Is's strictly impossible : the best way to understand it is that your browser itself needs the link ref to be able to jump to the page. If your browser can read this info, this means that you can read it somewhere, as well.

Related

Is there a way to remove the top bar in JSFiddle embedded view

When I go to the JSFiddle embedded full screen view (<url of fiddle>/embedded/result), there is always a bar at the top with JSFiddle on it, as shown here with where it says result:
Is there a way to remove this bar from the view?
Note:
You can also access this view by going to URL <url of fiddle>/show.
Before you read, please note that jsfiddle is a nice site and they do this so that people can't just use them for hosting and then embed their links.
Consider that before removing all their branding - don't be a jerk.
I don't know if they've changed this since Noel's answer, but it still shows the bar at the top for me.
It can still be done though.
Example:
https://fiddle.jshell.net/vmt32w4d/11/show/
The trick is to find the source of the iframe which is on fiddle.jshell.net as Noel suggests.
They keep this on a separate origin to give you a cross-origin exception if you try to access elements outside of the iframe.
This is no problem, just link to that instead and add the following code:
$("header",window.parent.document).remove();
$("#tabs",window.parent.document).css({
'margin-top':'0px',
'height':'100vh'
});
$("#result",window.parent.document).css({
'margin-top':'0px',
'height':'100vh'
});
I included the jquery library for this to work - otherwise you could just edit the code to alter the css using vanilla JS.
There may be a better way to alter the css or whatever, but now you know how to do so 🙂
The embedded fiddle is just an iframe within another iframe. You can take the source from the child iframe and replace the parent one with it.
Starting from the */embedded/result url like in the image.
Inspect the parent iFrame with Dev Tools.
Copy the child iFrame source link (looks like '/fiddle.jshell.net/blah/blah/show/light/').
Replace the parent embed source link with the copied one.
That should do it. Worked for me.

How to load all href links in a separate window

I am loading an HTML content parsed from an email to a frame. If the email contains an href link, it tries to open the link in its frame but I'd like to make it open in a new tab.
Normally, I'd do this by setting the target to _blank in the href, but the href tags are being read straight from the EML files, so unless if there's a better way, it seems like the only way I can accomplish this is to parse the HTML tags that is being read, find all href links and add the target to it. If possible, I'd like to avoid this option because parsing html adds a lot of downside to performance in general.
If anyone knows an elegant way of achieving this, please let me know.
This is not very elegant or semantic, but as a quick and dirty solution you can print a base tag before the first link:
<base target="_blank">
See http://www.w3schools.com/tags/att_base_target.asp for more info.
If you're using jQuery...
$('#frame a').click(function(event) {
event.preventDefault();
window.open($(this).attr('href'), '_blank');
});

<a>-tag name attribute not working in IE8

i made a link from one page to another page specific part.
here is my Example :
first page
tips
another page
<a name="tips">my tips</a>
it works fine in Ffox but not working in IE8.
what should i do.
Try using an ID instead (make sure it's unique on that page)
<a id="tips">my tips</a>
This seems to be the standard now though I'm not sure why name isn't working for you as AFAIK it hasn't been deprecated.
Update
What DOCTYPE are you using? Seems the name attribute has been marked "Obsolete" in HTML5. See http://www.w3.org/TR/html5/obsolete.html#obsolete-but-conforming-features
This is a long established html standard that most certainly works in ie8. For example, point IE8 to this wikipedia page and then click on the links in the contents box.
I would suggest that the problem is somewhere else in your code or with the link itself being to an invalid page. Some things to check;
Use <a id="tips">my tips</a> instead.
Is there more than one element with the document with tips as the id or name?
If all of the page is displayed within the window with no scroll bar, then the page won't scroll to your tips section.
If the anchor is on the same page that your link is on, simply us <a href="#tips"> instead.

Run JavaScript function when attempted to go to HTML anchor

Regardless of whether I'm trying to go to index.html#ExistingAnchor or index.html#NotExistingAnchor or any other anchor which might or might not exist on the page I'd like some javascript function to be run.
<html>
<body>
<a name="ExistingAnchor"></a>
</body>
</html>
What javascript code can I use to achieve it?
The page may already be loaded so I'd be just visiting HTML anchors on the same page from the browser address bar without reloading the page.
Also, having visited a number of anchors on the same page when I'm using the Back and Forward browser history buttons, I'd like some JavaScript function to be run as well so that I could identify what anchor I'm currently on - could you please advise this as well?
On modern browsers you can implement onHashChange event, on IE6/7 you're going to need to use some trickery involving iFrames and window.setTimeout.
The jQuery history plugin will achieve what you want if you use jQuery, if not you can study it and port it for your needs.
http://tkyk.github.com/jquery-history-plugin/

How does one track with JS where the visitors are going?

Let me reformulate, as the answer https://stackoverflow.com/questions/951907/where-are-my-visitors-going was absolutely correct, but my question not precise enough ;)
How does one track with Java Script where the visitors are going? (From a technical standpoint.)
Is the idea to execute a code every time a link is pressed? If yes, does this have to be specified in the <a>-tag itself, i.e., <a href="..." onmousedown="return mycode(this)">, or can this be done globally without having to mention it for every link?
I don't want the specifics of any code (as there is GoogleAnalytics etc.), I just want to know generally how it could work.
Btw, you guys are really quick!
You can write an event that records visitor activity per anchor tag or you can write a script that scans the document and does it for you (which is what Google Analytics does). If you choose to use a script, make sure you put it at the end of the document so that your web page is as responsive as possible.
You can easily iterate through anchor tags as follows (untested):
var tags = document.getElementsByTagName("a");
for (var i = 0; i < tags.length; i++) {
tags[i].onclick = function() {...};
}
This link may give you some idea - http://blog.ndrix.com/2007/07/how-google-analytics-works.html
A visitor loads a page on your website
In the process, her browser loads and runs some Javascript from Google
That Javascript collects information about the visitor
The information is sent to Google by requesting a URI and passing the details as CGI parameters
Tracking clicks that leave the website will require code for those specific links; there is no global way of tracking those clicks. If it's only to track internal links then an analysis of the web server log will provide that info globally, without any specific code for each link.
One possibility:
(from memory, probably has bugs in it...)
First, put a hidden div on the page and put an image inside it:
<div id="hiddenDiv" style="Display: None"><img id="someImage" /></div>
Next, put JS on each outgoing link that fetches a new image for that img tag:
<a href="http://www.someothersite.com/"
onclick='javascript:getElementById("someImage").src =
"http://www.yoursite.com/trackingimage.gif?ClickedSite=SomeOtherSite&LinkID=LeftSOSLink">
Visit Some Other Site</a>
Now, just search your web log for requests for trackingimage.gif and figure out which links leading to which site were clicked.
"Is the idea to execute a code every time a link is pressed?"
Yes, that's the general idea. And yes, you can implement something "globally" to capture all outgoing links.
This piece of Javascript should do the trick for you (if you're using Google Analytics). Every time an <a> tag is clicked that points to an external webpage, it is tracked by Google Analytics based on how you want outgoing links named (see line 29).

Categories

Resources