We Keep Coding

Pass all URL querystring parameters to an iframe using JavaScript

I want to pass all parameters from the querystring to an iframe on my page using JavaScript. I created a <div if="zohoframe"> before which the iframe should be inserted. This JavaScript should do the magic but it shows neither an error nor the iframe.
<script type="text/javascript">
const queryString = window.location.search;
var makediv = document.createElement("div");
makediv.innerHTML = '<iframe loading="lazy" width="100%" height="750px" src="SOMEURL' + queryString + '" frameborder="0" allowfullscreen=""> </iframe>';
var getRef = document.getElementById("zohoframe");
var parentDiv = getRef.parentNode;
parentDiv.insertBefore(makediv, getRef);
</script>

Pass query parameters to embeded iframe with javascript

I do not know much Javascript and I am trying to pass query string parameters to an embedded iframe.
Here is the url I am trying to retrieve query parameters from:
https://usslc.clickfunnels.com/optin1612360116340?contactId=924408&inf_contact_key=ea845fcb8c29d976c0755e8b56134056cc0558ed5d4c28cbfab114022b1ec50d&inf_field_BrowserLanguage=en-US%2Cen%3Bq%3D0.9&inf_field_FirstName=PG2&inf_field_Email=preston%2Btest2%40behavioralmedia.com&inf_field_Phone1=5554445555
Here is the code I need for the iframe:
<iframe src="https://app.squarespacescheduling.com/schedule.php?owner=21917237&appointmentType=20129186" title="Schedule Appointment" width="100%" height="800" frameBorder="0"></iframe><script src="https://embed.acuityscheduling.com/js/embed.js" type="text/javascript"></script>
This is what I have been working on and not getting any luck with:
<iframe id="myIframe" title="Schedule Appointment" width="100%" height="800" frameBorder="0"></iframe>
<script src="https://embed.acuityscheduling.com/js/embed.js" type="text/javascript">
let myIframe = document.getElementById("myIframe");
let src = "https://app.squarespacescheduling.com/schedule.php?owner=21917237&appointmentType=20129186"
let url = window.location.href;
let name = url.searchParams.get("inf_field_FirstName");
let email = url.searchParams.get("inf_field_Email")
let phone = url.searchParams.get("inf_field_Phone1")
let adsURL = src+"&firstName="+name+"&email="+email+"&phone="+phone;
myIframe.src = adsURL;
</script>
Again, I am a total noob with stuff like this so sorry if this is real bush league.
What is the best way to have the name, phone, and email prepopulate in the iframe?
Thanks!

Accessing an iframe that already exists on the page can be tough, if not impossible.
If you only need to have the desired fields w/ the iframe on page load then you could instead generate the iframe in the script tag and append it to the document like so:
<div id="frameWrapper"></div>
<script>
const url = window.location.href;
const frameWrapper = document.getElementById('frameWrapper');
const BASE_URL = 'https://app.squarespacescheduling.com/schedule.php?owner=21917237&appointmentType=20129186';
const frameElem = document.createElement("iframe");
frameElem.src = `${BASE_URL}` +
`&name=${url.searchParams.get("inf_field_FirstName")}` +
`&email=${url.searchParams.get("inf_field_Email")}` +
`&phone=${url.searchParams.get("inf_field_Phone1")}`;
frameElem.name = url.searchParams.get("inf_field_FirstName");
frameElem.title = "Schedule Appointment"
frameElem.style.height = "100%";
frameElem.style.width = "100%";
frameContainer.appendChild(frameElem);
</script>
In this case we are just replacing the iframe with a wrapper DIV, assembling the iframe in our script tag and appending it to the wrapper.

How can I pull a segment of the current page URL (last five digits) into an iFrame within the page, in Wordpress?

Our website uses Wordpress, and we pull our job openings from the software using an iFrame. The iFrame query requires us to get the job "code" from the URL (e.g. xyz.com/job-details/jobcode=11568).
The vendor has provided javascript that is supposed to do this, but it does not work. When the page loads the src just outputs as src(unknown)". The iframe should read as src="https://evoportalus.tracker-rms.com/COMPANY/jobs?fields=title,location&filters=Reference|<<the jobcode pulled from the URL>>
Can anyone help?
<script type="text/javascript">
loadSite();
</script>
<iframe src="" frameborder="0" scrolling="yes" width="700" height="700" id="trmsjobs"></iframe>
<script type="text/javascript">
var getQueryString = function (field, url) {
var href = url ? url : window.location.href;
var reg = new RegExp('[?&]' + field + '=([^&#]*)', 'i');
var string = reg.exec(href);
return string ? string[1] : null;
};
function loadSite() {
var site = "https://evoportalus.tracker-rms.com/LincolnStrategic/jobs";
site += "?fields=title,location&filters=reference|" + getQueryString("jobcode");
document.getElementById('trmsjobs').src = site;
}
</script>
On Edit
Apologies, I don't think my original explanation was clear enough. The getQueryString variable seems to work; it outputs just fine. The issue is that the "site" variable is not being inserted into the SRC value in the iFrame, which is what this script is supposed to do.

Tweak your code to move the function call into the same block and change var functionName = function syntax to function functionName syntax
<iframe src="" frameborder="0" scrolling="yes" width="700" height="700" id="trmsjobs"></iframe>
<script type="text/javascript">
loadSite();
function getQueryString (field, url) {
var href = url ? url : window.location.href;
var reg = new RegExp('[?&]' + field + '=([^&#]*)', 'i');
var string = reg.exec(href);
return string ? string[1] : null;
};
function loadSite() {
var site = "https://evoportalus.tracker-rms.com/LincolnStrategic/jobs";
site += "?fields=title,location&filters=reference|" + getQueryString("jobcode");
console.log(site);
document.getElementById('trmsjobs').src = site;
}
</script>

You can split the string with "/", then look for each component for the parameter you want, splitting this time with "=". Not a clean solution, but works:
var getQueryString = function(field, url){
var ret=null;
url.split("/").forEach(function(v){
var s=v.split("=");
if(s.length>1 && s[0]==field){
ret=s[1];
return;
}
});
return ret;
}

Add Dynamic Variable in URL Content in JQuery

I am trying to add attach my variable on my script section, since my filename is in GUID format. The filename is in hidden field:
string strDirectory = Server.MapPath(Url.Content("~/Content/AnnouncementImages/"));
string[] strFiles = Directory.GetFiles(strDirectory);
string strFileName = string.Empty;
foreach (var strFile in strFiles)
{
strFileName = Path.GetFileName(strFile);
}
<img id="myImg" src="#Url.Content("~/Content/AnnouncementImages/" + strFileName)" width="300" height="200" />
<input type="hidden" id="hiddenStringFileName" value="#strFileName"/>
In script section, I am trying to get this hidden field value:
function fncAnnouncementLoad()
{
var filename = document.getElementById('hiddenStringFileName');
//This is not working so far since it says cannot resolve symbol filename on below code:
modalImg.src = '#Url.Content("~/Content/AnnouncementImages/" + filename);
}

I am not sure what you are trying to do but if you want razor code plus javascript, you can put it in your view. Obviously this will no longer be unobtrusive javascript. But to do what you want, this will work. I added a button when you click it, it calls the function to show the concatenated URL.
#{
ViewBag.Title = "Test";
var strFileName = Guid.NewGuid();
}
<input type="hidden" id="hiddenStringFileName" value="#strFileName" />
<button onclick="fncAnnouncementLoad()">Show</button>
<script>
function fncAnnouncementLoad()
{
var filename = document.getElementById('hiddenStringFileName').value;
//This is not working so far since it says cannot resolve symbol filename on below code:
var src = '#Url.Content("~/Content/AnnouncementImages/")' + filename;
alert(src);
}
</script>

Add querystring to another page using Javascript?

To start, I am a complete beginner to Javascript and any language for that matter. I am using wordpress for my website.
I have a website that has images loaded according to a query string.
Ex.
www.mysite.com/page1 no image
www.mysite.com/page1?sponsor=calbest logo of calbest
www.mysite.com/page1?sponsor=pfcu logo of pfcu
My question is: how can I keep the current query string even when visiting other pages?
For example, I start off at www.mysite.com/page1?sponsor=calbest and want to click a link to another page. How can I ensure that I arrive at www.mysite.com/page2?sponsor=calbest without having to write it directly in HTML?
The reason I need this is so that I can update page1 or others and add various sponsors to the pages so they have a "personalized" webpage.
Is there a Javascript function that could just add the query string in use to any link I click?

This is a "Jquery" way to do it:
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type='text/javascript'>
$(function(){
getParameterByName = function(name) {
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
var sponsor = getParameterByName('sponsor') || 'calbest';
$('a.sponsor').each(function( index ) {
$(this).attr("href", $(this).attr("href")+ "?sponsor="+ sponsor);
});
});
</script>
</head>
<body>
<a class="sponsor" href="http://www.google.com">Google</a>
<a class="sponsor" href="http://www.yahoo.com">Yahoo</a>
<a class="sponsor" href="http://stackoverflow.com">Stackoverflow</a>
MS Not Sponsored
</body>
</html>
Not forgetting where I got the getParameterByName