I want to have the href consist of a variable set in javascript, I also need the text that is displayed on the page to be a variable. In the example below I would like to have the string "http://google.com" be assigned to a variable, I also need to have "My Link Name" as a variable. I have looked at similar questions here but I don't see what addresses this particular situation.
Go Here Now<br>
In the example below I can create a variable called myLinkName and set it to the string "Go here now" however I don't know how to create a variable and set it to the value of the href e.g. "http://google.com"
<script type="text/javascript">
var myLinkName = "Go Here Now";
</script>
<a href="http://google.com">
<script type="text/javascript">
document.write(myLinkName)
</script></a>
You have to use the DOM API
HTML
<a id="aLink"></a>
Javascript
let link = document.getElementById('aLink');
link.href = "https://google.com";
link.innerText = 'This is my Link'
The complete code:
<html>
<body>
<a id="aLink"></a>
<script>
let link = document.getElementById('aLink');
link.href = "https://google.com";
link.innerText = 'This is Link';
</script>
</body>
</html>
I fear you are using some very old JavaScript material.
The usage of document.write() is depricated.
The approach you are following is antiqated. Today JS is not evaluated and just written to the document. Instead the document is explicitly manipulated.
First of all: <script> is sufficient to declare some JavaScript. The type attribute is not needed anymore.
<a id=myLink></a>
<script>
//get a reference to the a element
const myLink = document.getElementById("myLink");
//set the text
myLink.innerText = "Click me!";
//set href
myLink.href = "http://google.com";
</script>
You can set href attribute like this
var text = 'Go Here Now';
var href = 'http://google.com'
var atag = document.getElementsByTagName('a')[0];
atag.innerText = text;
atag.href = href;
var text = 'Go Here Now';
var href = 'http://google.com'
var atag = document.getElementsByTagName('a')[0];
atag.innerText = text;
atag.href = href;
<br>
I would create an object that contains your link name and href and on page load, assign accordingly. Something like:
window.addEventListener('load', function(){
var link = {
name : 'My Link Name',
href : 'http://google.com' //should use : instead of =
};
var myLink = document.getElementByTagName('a')[0]; //You would change this to whatever selector you want.
myLink.innerText(link.name);
myLink.setAttribute('href', link.href);
}, true);
Syntax may not be perfect. And, depending on your situation, it may be better to accomplish this with your server side code. Hope this helps!
You can change the href attribute by doing this:
<a href="http://google.com" id="link">
<script type="text/javascript">
var yourtext = 'Go Here Now';
var href = 'http://google.com';
document.getElementById('link').href = myLinkName;
document.getElementById('link').innerText = yourtext;
</script></a>
By using JQuery we can update/add href to the element like below.
HTML code:
Click Here
JQuery code:
$("#linkId").attr("href", "http://www.google.com/'");
I have two html webpages. One page has a 'div' named "iframe-content" .
When I click on the div, it should set the iframe src in the second html page.
Page 1:
<div class="iframe-content" onclick="passIframe()">
//div which should set the iframe src on the other page on clicking
</div>
Page 2:
<iframe src="about:blank" id="native-iframe" width="450" height="180"scrolling="no">
//The iframe which should obtain the source from the first page
</iframe>
Whenever I click the "iframe-content" ,it should open the html page 2 and it should also set the "native-iframe" source as I wish.
Is there any efficient way to do it?
You can send the url as a query parameter and on page2, you can read and set it to the iframe. Something like this:
// Page1:
function passIframe() {
var url = ""; // The url to pass
window.location.href = "/page2.html?url=" + url;
}
// Page2:
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
var src= getParameterByName("url");
$("iframe").attr("src", url);
Note: the getParameterByName is just a function to get the query string parameter from the URL. I copied this function from this Stackoverflow question, but there are many other solutions to do this task.
YOu can set iframe src attribute to your desired url
$('iframe').attr('src', url)
So trying to figure out how to do this with window.location in Javascript. I'm sending users to our site with an appended URL with a Google Analytics code that I need to pass to an iframe src on that page. I'd assume Javascript could do this (note - I cannot use PHP)...
This is what I want to do:
I'd send users to the page with all the campaign data in tact. For example a user would click on this link:
http://www.xyz.com/index.html?utm_source=Facebook&utm_campaign=Facebook+May&utm_medium=click
They would be directed to that page, that then has this iFrame on it. The code on the store side would need to pick up utm_source, utm_campaign, utm_medium and include these parts in the IFRAME SRC So this bit:
<iframe height="960px" frameborder="0" scrolling="no" width="958px" src="http://www.abc.com/minis"></iframe>
now becomes:
<iframe height="960px" frameborder="0" scrolling="no" width="958px" src="http://www.abc.com/minis?utm_source=Facebook&utm_campaign=Facebook+May&utm_medium=click"></iframe>
Any javascript suggestions would be greatly appreciated. Note - I cannot use PHP.
UPDATE:
Got this to work!! Yay, but now I need to edit it a bit:
So say the appended url that was clciked was this:
http://abc.com/index.html?apple&orange&peach
and I need the iframe src to be this
http://xyz.com/minis?orange&peach
I moved a few things around in the script, but is now only grabbing orange and not the other & attribute (peach). please advise if there is a better way to work (without have all the params and then depending on what link comes in, some of the & will be undefined:
<body>
<script type="text/javascript">
$(function() {
var loc = window.location.toString(),
params = loc.split('&')[1],
params2 = loc.split('&')[2],
params3 = loc.split('&')[3],
params4 = loc.split('&')[4],
params5 = loc.split('&')[5],
params6 = loc.split('&')[6],
iframe = document.getElementById('myIframe');
alert(iframe.src);
iframe.src = iframe.src + '?' + params + '&' + params2 + '&' + params3 + '&' + params4+ '&' + params5;
alert(iframe.src);
});
</script>
<iframe id="myIframe" src="http://www.xyz.com/minis"></iframe>
</body>
This little snippet should do, here all you have to do is grab the bit after ? as a string and append it to the iframe source.
var loc = window.location.toString(),
params = loc.split('?')[1],
iframe = document.getElementById('myIframe');
iframe.src = iframe.src + '?' + params;
Just use window.location.search.
const iframe = document.getElementById('frame');
iframe.src = iframe.src + window.location.search;
I'm trying to create and manipulate the Pin It button after page load. When i change the button properties with js, it should be rerendered to get the functionality of pinning dynamically loaded images. So, does Pinterest have any method like Facebook's B.XFBML.parse() function?
Thanks...
Just add data-pin-build attribute to the SCRIPT tag:
<script defer
src="//assets.pinterest.com/js/pinit.js"
data-pin-build="parsePinBtns"></script>
That causes pinit.js to expose its internal build function to the global window object as parsePinBtns function.
Then, you can use it to parse links in the implicit element or all of the links on the page:
// parse the whole page
window.parsePinBtns();
// parse links in #pin-it-buttons element only
window.parsePinBtns(document.getElementById('pin-it-buttons'));
Hint: to show zero count just add data-pin-zero="1" to SCRIPT tag.
The best way to do this:
Remove the iframe of the Pin It button you want to manipulate
Append the html for the new button manipulating it as you wish
Realod their script - i.e. using jQuery:
$.ajax({ url: 'http://assets.pinterest.com/js/pinit.js', dataType: 'script', cache:true});
To render a pin-it button after a page has loaded you can use:
<a href="..pin it link.." id="mybutton" class="pin-it-button" count-layout="none">
<img border="0" src="//assets.pinterest.com/images/PinExt.png" width="43" height="21" title="Pin It" />
</a>
<script>
var element = document.getElementById('mybutton');
(function(x){ for (var n in x) if (n.indexOf('PIN_')==0) return x[n]; return null; })(window).f.render.buttonPin(element);
</script>
Assuming of course the assets.pinterest.com/js/pinit.js is already loaded on the page. The render object has some other useful methods like buttonBookmark, buttonFollow, ebmedBoard, embedPin, embedUser.
I built on Derrek's solution (and fixed undeclared variable issue) to make it possible to dynamically load the pinterest button, so it can't possibly slow down load times. Only tangentially related to the original question but I thought I'd share anyway.
at end of document:
<script type="text/javascript">
addPinterestButton = function (url, media, description) {
var js, href, html, pinJs;
pinJs = '//assets.pinterest.com/js/pinit.js';
//url = escape(url);
url = encodeURIComponent(url);
media = encodeURIComponent(media);
description = encodeURIComponent(description);
href = 'http://pinterest.com/pin/create/button/?url=' + url + '&media=' + media + '&description=' + description;
html = '<img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" />';
$('#pinterestOption').html(html);
//add pinterest js
js = document.createElement('script');
js.src = pinJs;
js.type = 'text/javascript';
document.body.appendChild(js);
}
</script>
in document ready function:
addPinterestButton('pageURL', 'img', 'description');//replace with actual data
in your document where you want the pinterest button to appear, just add an element with the id pinterestOption, i.e.
<div id="pinterestOption"></div>
hope that helps someone!
Here's what I did.
First I looked at pinit.js, and determined that it replaces specially-marked anchor tags with IFRAMEs. I figured that I could write javascript logic to get the hostname used by the src attribute on the generated iframes.
So, I inserted markup according to the normal recommendations by pinterest, but I put the anchor tag into an invisible div.
<div id='dummy' style='display:none;'>
<a href="http://pinterest.com/pin/create/button/?
url=http%3A%2F%2Fpage%2Furl
&media=http%3A%2F%2Fimage%2Furl"
class="pin-it-button" count-layout="horizontal"></a>
</div>
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js">
</script>
Then, immediately after that, I inserted a script to slurp up the hostname for the pinterest CDN, from the injected iframe.
//
// pint-reverse.js
//
// logic to reverse-engineer pinterest buttons.
//
// The standard javascript module from pinterest replaces links to
// http://pinterest.com/create/button with links to some odd-looking
// url based at cloudfront.net. It also normalizes the URLs.
//
// Not sure why they went through all the trouble. It does not work for
// a dynamic page where new links get inserted. The pint.js code
// assumes a static page, and is designed to run "once" at page creation
// time.
//
// This module spelunks the changes made by that script and
// attempts to replicate it for dynamically-generated buttons.
//
pinterestOptions = {};
(function(obj){
function spelunkPinterestIframe() {
var iframes = document.getElementsByTagName('iframe'),
k = [], iframe, i, L1 = iframes.length, src, split, L2;
for (i=0; i<L1; i++) {
k.push(iframes[i]);
}
do {
iframe = k.pop();
src = iframe.attributes.getNamedItem('src');
if (src !== null) {
split = src.value.split('/');
L2 = split.length;
obj.host = split[L2 - 2];
obj.script = split[L2 - 1].split('?')[0];
//iframe.parentNode.removeChild(iframe);
}
} while (k.length>0);
}
spelunkPinterestIframe();
}(pinterestOptions));
Then,
function getPinMarkup(photoName, description) {
var loc = document.location,
pathParts = loc.pathname.split('/'),
pageUri = loc.protocol + '//' + loc.hostname + loc.pathname,
href = '/' + pathToImages + photoName,
basePath = (pathParts.length == 3)?'/'+pathParts[1]:'',
mediaUri = loc.protocol+'//'+loc.hostname+basePath+href,
pinMarkup;
description = description || null;
pinMarkup = '<iframe class="pin-it-button" ' + 'scrolling="no" ' +
'src="//' + pinterestOptions.host + '/' + pinterestOptions.script +
'?url=' + encodeURIComponent(pageUri) +
'&media=' + encodeURIComponent(mediaUri);
if (description === null) {
description = 'Insert standard description here';
}
else {
description = 'My site - ' + description;
}
pinMarkup += '&description=' + encodeURIComponent(description);
pinMarkup += '&title=' + encodeURIComponent("Pin this " + tagType);
pinMarkup += '&layout=horizontal&count=1">';
pinMarkup += '</iframe>';
return pinMarkup;
}
And then use it from jQuery like this:
var pinMarkup = getPinMarkup("snap1.jpg", "Something clever here");
$('#pagePin').empty(); // a div...
$('#pagePin').append(pinMarkup);
I rewrote the Pinterest button code to support the parsing of Pinterest tags after loading AJAX content, similar to FB.XFBML.parse() or gapi.plusone.go(). As a bonus, an alternate JavaScript file in the project supports an HTML5-valid syntax.
Check out the PinterestPlus project at GitHub.
The official way to do this is by setting the "data-pin-build" attribute when loading the script:
<script defer="defer" src="//assets.pinterest.com/js/pinit.js" data-pin-build="parsePins"></script>
Then you can render your buttons dynamically like so:
// render buttons inside a scoped DOM element
window.parsePins(buttonDomElement);
// render the whole page
window.parsePins();
There is also another method on this site which lets you render them in JavaScript without the script tag.
Here is what i did.. A slight modification on #Derrick Grigg to make it work on multiple pinterest buttons on the page after an AJAX reload.
refreshPinterestButton = function () {
var url, media, description, pinJs, href, html, newJS, js;
var pin_url;
var pin_buttons = $('div.pin-it a');
pin_buttons.each(function( index ) {
pin_url = index.attr('href');
url = escape(getUrlVars(pin_URL)["url"]);
media = escape(getUrlVars(pin_URL)["media"]);
description = escape(getUrlVars(pin_URL)["description"]);
href = 'http://pinterest.com/pin/create/button/?url=' + url + '&media=' + media + '&description=' + description;
html = '<img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" />';
index.parent().html(html);
});
//remove and add pinterest js
pinJs = '//assets.pinterest.com/js/pinit.js';
js = $('script[src*="assets.pinterest.com/js/pinit.js"]');
js.remove();
js = document.createElement('script');
js.src = pinJs;
js.type = 'text/javascript';
document.body.appendChild(js);
}
});
function getUrlVars(pin_URL)
{
var vars = [], hash;
var hashes = pin_URL.slice(pin_URL.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
Try reading this post http://dgrigg.com/blog/2012/04/04/dynamic-pinterest-button/ it uses a little javascript to replace the pinterest iframe with a new button and then reloads the pinit.js file. Below is the javascript to do the trick
refreshPinterestButton = function (url, media, description) {
var js, href, html, pinJs;
url = escape(url);
media = escape(media);
description = escape(description);
href = 'http://pinterest.com/pin/create/button/?url=' + url + '&media=' + media + '&description=' + description;
html = '<img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" />';
$('div.pin-it').html(html);
//remove and add pinterest js
pinJs = $('script[src*="assets.pinterest.com/js/pinit.js"]');
pinJs.remove();
js = document.createElement('script');
js.src = pinJs.attr('src');
js.type = 'text/javascript';
document.body.appendChild(js);
}
Their pinit.js file, referenced in their "Pin it" button docs, doesn't expose any globals. It runs once and doesn't leave a trace other than the iframe it creates.
You could inject that file again to "parse" new buttons. Their JS looks at all anchor tags when it is run and replaces ones with class="pin-it-button" with their iframe'd button.
this works fine for me: http://www.mediadevelopment.no/projects/pinit/ It picks up all data on click event
I tried to adapt their code to work the same way (drop in, and forget about it), with the addition that you can make a call to Pinterest.init() to have any "new" buttons on the page (eg. ajax'd in, created dynamically, etc.) turned into the proper button.
Project: https://github.com/onassar/JS-Pinterest
Raw: https://raw.github.com/onassar/JS-Pinterest/master/Pinterest.js
As of June 2020, Pinterest updated the pin js code to v2. That's why data-pin-build might not work on
<script defer="defer" src="//assets.pinterest.com/js/pinit.js" data-pin-build="parsePins"></script>
Now it works on pinit_v2.js
<script async defer src="//assets.pinterest.com/js/pinit_v2.js" data-pin-build="parsePins"></script>
I've implemented a facebook like button into my (html) website. Now german data protection laws want webpages to be opt-in. Other websites do this by not immediately showing the facebook like but instead showing a button saying "activate facebook button" and when this button is clicked they replace it with the real facebook button.
So it requires two clicks, but this is ok for me. An example is this webpage.
I know html and php but got no clues about javascript (yet). I'd like to know how to implement this: how can I replace the fake button with the facebook one upon clicking?
Looking in their source, they site is using a function they called button2iframe - here it is:
function button2iframe(id,link){
//alert(id);
var substr = link.split("?");
var url = substr[0];
substr.reverse();
substr.pop();
substr.reverse();
var params = substr.join("?");
params = params.split("&");
var k;
var param = "";
var paramname = "";
for( var k=0; k<params.length; k++ ) {
param = params[k].split("=");
if(param.length>1){
if(param.length>2){
paramname = param[0];
param.reverse();
param.pop();
param.reverse();
param[1] = param.join("=");
param[0] = paramname;
}
param[1] = encodeURIComponent(param[1]);
}
params[k] = param.join("=");
}
params = params.join("&");
link = url+"?"+params;
jQuery(function ($) {
$("#"+id).html($('<iframe allowtransparency="true" frameborder="0" scrolling="no" src="'+link+'" id="iframe_'+id+'"/>'));
});
}
And this is what the associated markup for the facebook button looks like:
<li class="wpsoptin_facebook" id="wpsoptin_facebook_39429">
<div class="wpsoptin_medium">
<a class="wpsoptin_sharerlink" href="javascript:button2iframe('wpsoptin_facebook_39429','FACEBOOK LIKE BUTTON IFRAM URL GOES HERE')">Facebook aktivieren</a>
<div class="wpsoptin_sharerend"></div>
</div>
</li>
This code requires you include jQuery in your site as well.
try this if you dont want to use jquery, just remove the couple of line provided Nathan Anderson good answer
//jQuery(function ($) {
// $("#"+id).html($());
document.getElementById(id).innerHTML = '<iframe allowtransparency="true" frameborder="0" scrolling="no" src="'+link+'" id="iframe_'+id+'"/>'
///});