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;
}

jQuery replaceWith issue

I have an iframe to a third party system and which, when called, updates a database record and then displays a confirmation message. I'd like to change the text of the confirmation using jQuery, but cannot seem to get it working. This is the code I have so far. The call to the third party system works but the replacement text doesn't appear. Any pointers, please? Thank you.
<script type="text/javascript">
$.urlParam = function(name){
var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (!results) { return ''; }
return results[1] || '';
}
var lidval = $.urlParam('lid');
var cidval = $.urlParam('cid');
var cyidval = $.urlParam('cyid');
//construct url
var crmurl ='http://somerandomhost.com/Portal/index.php?task=unsusbscribe&lid='+lidval+'&cid='+cidval+'&cyid='+cyidval;
jQuery(function($){
$('#crm').attr('src', crmurl);
});
</script>
<iframe frameborder="0" id="crm" scrolling="no" width="100%" src=""></iframe>
<script type="text/javascript">
function($){
$('crm').replaceWith('Replacement text goes here');
};
</script>

if you want to show the string into the irframe try this:
PURE JS:
var doc = document.getElementById('crm').contentDocument;
doc.body.innerHTML = 'Replacement text goes here';
jQuery:
var doc = $('#crm')[0].contentDocument;
$(doc.body).html('Replacement text goes here')

To change content of an iframe you can Try below code
var ifr = $('#crm')[0].contentWindow.document,
ifbody = $('body',ifr);
ifbody.html('Replacement text goes here');

Advert delivery via Javascript document.write

I'm building an advert delivery method and am try to do it through an external Javascript/jQuery page.
I have this so far, but I have some issues with it
$.get('http://url.com/ad.php', {
f_id: _f_id,
f_height: _f_height,
veloxads_width: _f_width
}, function (result) {
var parts = result.split(",");
var path = parts[0],
url = parts[1];
document.write('<img src="' + path + '">');
I can see the page load, but then after the code above is loaded, it creates a new page with just the advert on it. Is there anyway I can write it onto the page where the code was put?
And this is the script web masters put on their websites to include the adverts:
<script type="text/javascript">
var _f_id = "VA-SQ2TDEXO78N0";
var _f_width = 728;
var _f_height = 90;
</script>
<script type="text/javascript" src="http://website.com/cdn/addelivery.js"></script>
Cheers

is ad.php on the same domain as your script? if it's not have a look at this article
here is a code you could use in your html page, where you want the ad to be inserted:
$.get('http://url.com/ad.php',
{ f_id : _f_id, f_height : _f_height, veloxads_width : _f_width }
).success(function(result) {
var parts = result.split(",");
var path = parts[0], url = parts[1];
$('body').prepend('<div id="ad_id"><img src="'+path+'"></div>');
});
the selector (body here) can be an id, a class, ... (see documentation). You can also use prepend() or html() instead of append, to insert the code where you want ;)