Pass all URL querystring parameters to an iframe using JavaScript - 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>

Related

Dynamic iframe src based on custom WordPress metadata

I've been trying to show a graph inside a WordPress Template.
It works fine with this format:
<iframe height="500" src="https://datasource.com/fantom/0xf704f5ac5edf152168e07e6f5f108366911250ac?embed=1&theme=dark&trades=0&info=0">
</iframe>
But I can't seem to make it work in a template using dynamic metadata.
<script>
function ShowGraph() {
var RawNetwork=document.getElementById("TokenNetwork").innerHTML;
var Network = RawNetwork.replace(/<[^>]*>/g, '');
var RawAddress=document.getElementById("TokenAddress").innerHTML;
var Address = RawAddress.replace(/<[^>]*>/g, '');
const Graph = 'https://datasource.com/' + Network + '/' + Address + '?embed=1&theme=dark&trades=0&info=0';
document.getElementById('TokenGraph').src = Graph;
}
</script>
<iframe height="500" id="TokenGraph" src="" onLoad="ShowGraph();"></iframe>
I hope somebody can help me figure out what I'm missing here.
Cheers mates!
There is a loop.
Onload you are changing the src and then onload fires again.
try
<script>
window.onload = function () {
var RawNetwork=document.getElementById("TokenNetwork").innerHTML;
var Network = RawNetwork.replace(/<[^>]*>/g, '');
var RawAddress=document.getElementById("TokenAddress").innerHTML;
var Address = RawAddress.replace(/<[^>]*>/g, '');
const Graph = 'https://datasource.com/' + Network + '/' + Address + '?embed=1&theme=dark&trades=0&info=0';
document.getElementById('TokenGraph').src = Graph;
}
</script>
<iframe height="500" id="TokenGraph" src=""></iframe>

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

Access parent div from the child page

I have three pages, two .aspx page and one .ascx page in parent child relationship. Page1.aspx->Page2.aspx->page3.aspx
Page1.aspx contains iframe inside div:
<script type="text/javascript">
$(document).ready(function () {
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;
};
var consoletype = getQueryString('ConsoleType');
var role = getQueryString('role');
var url = "/_layouts/Page2.aspx?Type=" + consoletype + "&role=" + role;
$("#load").attr("src", url);
});
</script>
<div id="loader" class="loading">
Processing
<img id="imgloader" src="../../_layouts/images/loadr.gif"
style="display: none" alt="" />
<iframe id="load" src="" width="1000px" height="400"></iframe>
</div>
Then in Page2.aspx i am registering .ascx page:
<%# Register TagPrefix="Import" TagName="Import" Src="~/_controltemp/Page3.ascx" %>
Then in Page3.ascx i have my actual code. From this page i need to access the div present in Page1.aspx.
I need to achive this with javascript or with c# code.
Note: These are all sharepoint application pages.
Please suggest the way to achieve this.

how to share a url with # in twitter using tweet_button.html

i have a twitter img with onclick function tweetpage
<img src="images/twtr.png" onclick="tweetPage();"/>
function tweetPage()
{
var url = "http://www.website.com/index.html#eyJkIjoidGhpcyBpcyBh";
var testUrl ="https://platform.twitter.com/widgets/tweet_button.html?url="+url
var htmlStr = '<iframe allowtransparency="true" frameborder="0" scrolling="no"'
+'src="'+testUrl+'"'
+'style="width:130px; height:20px;padding-top: 37%;"></iframe>'
$('#twitLindDiv').html(htmlStr);
}
and a tweetbutton is shown. clicking on the tweet button a twitter popup box is shown
but the url in textbox contains only
http://www.website.com/index.html
how can i solve this.
I also tried
&hashtags= instead of #
the result was
http://www.website.com/index.html #eyJkIjoidGhpcyBpcyBh
how can i solve this
tweetid is the div to which this inner html is added (this works fine for me.)
var referenceUrl = window.location.toString();
var shareUrl = 'http://www.website.com/index.html#eyJkIjoidGhpcyBpcyBh'
$('#tweetid').html('<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.1368146021.html#_=1369640770351&
count=none&
id=twitter-widget-0&
lang=en&original_referer='
+encodeURIComponent(referenceUrl)
+'&related=nothing%20to%20worry&size=m&
text=LiveImpact&
url='+encodeURIComponent(shareUrl)
+'" class="twitter-share-button twitter-count-none" title="Twitter Tweet Button" data-twttr-rendered="true" style="width: 56px; height: 20px;">'
+'</iframe>');

Categories