Trying to do the following:
Store params from url, i.g. mydomain.com/page.html?cid=123456
If a user clicks on a button (they have a class of .btn-cta) it will take the params ?cid=123456 and add them to the new page those buttons link to /tour.html
I'm currently doing 1/2 of that with passing the params to an iframe on the page, now I need to get the above part working:
var loc = window.location.toString(),
params = loc.split('?')[1],
iframe = document.getElementById("signupIndex"),
btn = $('.btn-cta');
iframe.src = iframe.src + '?' + params;
Here's how I'd do it using jquery:
$('.btn-cta').each(function(i, el){
let $this = $(this); // only need to create the object once
$this.attr({
href: $this.attr("href") + window.location.search
});
});
And in Vanilla ES2015
document.querySelectorAll('.btn-cta')
.forEach(el => el.attributes.href.value += window.location.search);
This takes all the elements that have class .btn-cta and appends the page query string to each of their href attributes.
So if the page url is `http://domain/page.html?cid=1234
Tour
becomes
Tour
<html>
<head>
<script src="js/jquery.js"></script>
<script>
$(document).ready(function() {
var loc = window.location.href;
var params = loc.split('?')[1];
$(".btn-cta").click(function(){
window.open("tour.html?"+params,'_self',false);
});
});
</script>
</head>
<body>
<button type="submit" class="btn-cta">Click Me</button>
</body>
</html>
Related
I have a custom Wordpress page, with 2 text input boxes, one for "yourvarname" and the other for "key"and an iframe displaying a google document.
Both these Text boxes are populated from variables obtained from the url. This works fine.
What I would like to do:
Have the iframe display the document as named in the textbox, yourvarname.
this is what I have so far
<?php /* Template Name: CustomPageT1 */ ?>
<p><input id="yourvarname" type="text" value="" /> <input id="key" type="text" value="" />
<script type="text/javascript">// <![CDATA[
var url_string = window.location.href; //window.location.href
var url = new URL(url_string);
var c = url.searchParams.get("yourvarname");
var d = url.searchParams.get("key");
document.getElementById("yourvarname").value = c;
document.getElementById("key").value = d;
// ]]></script>
</p>
<iframe src="https://docs.google.com/document/d/e/2PACX-1vTCJM2gUN4_aesXjEB7XtKWu0dB8anwWkjgolj1zRLU2aJieScUXF6WXzMbjYXs7g/pub?embedded=true"
width="110%"
height="500"
class="myIframe">
<p>Hi SOF</p>
</iframe>
<script type="text/javascript" language="javascript">
$('.myIframe').css('height', $(window).height()+'px');
</script>"
<script type="text/javascript" language="javascript">
global $wp_query;
if (isset($wp_query->query_vars['yourvarname']))
{
print $wp_query->query_vars['yourvarname'];
}
</script>
enter code here
Let's start with basic information. In Javascript you can get your iframes like this:
document.getElementsByTagName("iframe")
Since you have a single iframe, you can get it like this:
document.getElementsByTagName("iframe")[0]
but it would potentially save you from trouble to give an id to this tag. Let's define the src of your iframe
document.getElementsByTagName("iframe")[0].src = "somevalue";
Okay, let's apply this in your script:
var url_string = window.location.href; //window.location.href
var url = new URL(url_string);
var c = url.searchParams.get("yourvarname");
var d = url.searchParams.get("key");
document.getElementById("yourvarname").value = document.getElementsByTagName("iframe").src = c;
document.getElementById("key").value = d;
However, if you want it to change when the input changes, then you will need to define a change event for it.
so this is what i added, perhaps incorrectly, as i am now getting 404 error and nothing is displayed
<script type="text/javascript" language="javascript">
document.getElementsByTagName("iframe")[0].src = "yourvarname";
var url_string = window.location.href; //window.location.href
var url = new URL(url_string);
var c = url.searchParams.get("yourvarname");
var d = url.searchParams.get("key");
document.getElementById("yourvarname").value = document.getElementsByTagName("iframe").src = c;
document.getElementById("key").value = d;
</script>
If I set the URL to exmaple.com?blank=true a blank page should be presented.
Using JavaScript or jQuery i want a short snippet that looks for ?blank=true in the url and if it finds it than the page to turn white or blank.
Try like this
var url_string = "https://example.com?blank=true "; //window.location.href
var url = new URL(url_string);
var blank = url.searchParams.get("blank");
if(blank){
document.getElementsByTagName("body")[0].style.display = "none";
}
<body>
<p>this will be hidden</p>
</body>
wrap your html content in a element like this
<html>
<body>
<div id="wrapper">
<!-- ********your content here******** -->
</div>
</body>
</html>
use jquery code as
$(document).ready(function() {
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('=');
if(sURLVariables[0]=="blank" && sURLVariables[1]=="true")
{$('#wrapper').css('display','none');}
else{
$('#wrapper').css('display','block');
}
});
With jQuery
var blank = /(?<=blank=)[^&?]+/g.exec('https://example.com?blank=true')[0];
if(blank === 'true'){
$('body').hide();
}else{
$('body').show();
}
i know the basics of loading a page or a file in a container frame via js or jQuery, but via event listener like onClick
JS -
document.getElementById("id").innerHTML = "<object type = 'text/html' data = 'myfile.html'> </data>"
JQUERY -
$("#id").load("myfile.txt");
but what I want to achieve is the same as this but not just being loaded onClick in the container frame, but also add a parameter on the url, for example:
if I click on a button, `webpage.html` will load on `<div>` container frame, and the `url` will change to `http://example.com/?loaded=webpage.html`
I wanted to do this, so I can either change the url string or press an element and load a certain file on the div container frame.
the same principle goes as how facebook manages profile.php
http://facebook.com/profile.php?=mypersonalprofile - load my profile
http://facebook.com/profile.php?=myfriendsprofile - load my friends profile
I hope I managed to deliver it clearly.
I think this would demonstrate what you looking for
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<button class="loadButton" value="input1.txt">Load file 1</button>
<button class="loadButton" value="input2.txt">Load file 2</button>
<div id="view"></div>
</body>
<script>
$(function(){
// Call loadPage on init
loadPage();
$(".loadButton").on("click", function(){
// Change URL, you can change "/testJS/index.html" to suit your web address
history.pushState({}, "", "/testJS/index.html?loaded=" + $(this).attr("value"));
$("#view").empty();
$("#view").load($(this).attr("value"));
});
});
function loadPage() {
console.log("start");
var href = window.location.href;
var index = href.indexOf("?loaded=");
// Load data if we define the loaded param
if (index > -1) {
data = href.substring(index + 8);
console.log(index + " " + data);
$("#view").empty();
$("#view").load(data);
}
}
</script>
</html>
You need to combine the solutions from Get url parameter jquery Or How to Get Query String Values In js and Modify the URL without reloading the page.
You can set the page with
history.pushState({}, "", "/mainpage.html?loaded=webpage.html");
$("#id").load("webpage.html");
Then, if they change the url some other way (which will require the page to reload), you can get the parameter from the url and load it:
var myfile = getUrlParameter("loaded");
$("#id").load(myfile);
The getUrlParameter function is defined as:
var getUrlParameter = function getUrlParameter(sParam) {
var sPageURL = decodeURIComponent(window.location.search.substring(1)),
sURLVariables = sPageURL.split('&'),
sParameterName,
i;
for (i = 0; i < sURLVariables.length; i++) {
sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] === sParam) {
return sParameterName[1] === undefined ? true : sParameterName[1];
}
}
};
Trying to get the aspx name from the current page from javascript?
Try this
<script language="javascript">
var url = window.location.pathname;
var myPageName = url.substring(url.lastIndexOf('/') + 1);
alert(myPageName);
</script>
As an alternative -
var page = '<%=Path.GetFileName(Request.Path)%>'
Do you want to parse the current window, or rely on asp.net?
Both work - it's up to you.
To Get The Exact Formname using jquery one can do string manipulation as shown.
$(document).ready(function () {
var path = window.location.pathname;
var page = path.substr( path.lastIndexOf("/") + 1 ).split(".",1);
var formname=page[0].toString();
alert(formname);
});
This one without the query string
$(function () {
var url = window.location.pathname;
var pageQuery = url.substring(url.lastIndexOf('/') + 1);
var page = pageQuery.split('?')[0];
)}
<a href='http://www.domain.com' id='replace' style='text-decoration:none;color:black;font-size:10px;'>This is text link</a>
<script language="javascript">
var newURL = "mydomain.com/?refid=4877";
onload=function() {
var dt = document.getElementById("replace");
document.body.innerHTML = dt.getAttributeNode("href").value.replace(/domain.com/g,newURL);
}
Just assign to the href attribute:
dt.href = dt.href.replace(/domain.com\/?/, newURL);
The optional trailing slash caters for browsers that automatically add a slash to hrefs.
You should probably use JQuery:
$(document).ready(function(){
$("#replace").attr("href","http://www.mydomain.com/?refid=4877");
});