Here's the issue: My site is slow and it's because of iframes. Due to that, I want to delay the iframes loading until the rest of the page loads. However, I also need to append a bunch of parameters to the iframe src
before it appears to a visitor. So here's the order of things that need to happen:
- Page loads with all the crucial things for a visitor to see (CSS, text, images, etc.)
- Delay the load of the iframes about 5 seconds, to make sure the whole page loads, and the iframes don't slow down the loading time (could use
setTimeout
?) - Append a bunch of parameters to the
iframe src
via JavaScript - Then allow the iframe to appear on the page
For the sake of context, here's the website: http://meetingtomorrow.com/ (the iframe is actually a form that appears after you click the blue "Request a Quote" sidetab). There are also often 2 other iframes that appear on the page: an exit intent form and another quote form.
Here's how we're currently initiating the function to append parameters to the iframe src
on the site:
<body onload="populateHiddenFields(document.forms['ga-tracking-form'])">
And here's how we're currently appending the parameters to the iframe src:
function populateHiddenFields() {
jQuery('form#ga-tracking-form').each(function (index, element) {
var f = this;
f.source.value = source;
f.medium.value = medium;
f.term.value = term;
f.content.value = content;
f.campaign.value = campaign;
f.gclid.value = gclid;
f.segment.value = csegment;
f.numVisits.value = nVisits;
});
var loc = window.location.toString();
params = loc.split('?')[1];
document.getElementById("nsIframeSidetab").src = document.getElementById("nsIframeSidetab").src + '&custentity_web_lead_nab_parameter=' + encodeURIComponent(params) + '&custentity_ga_search_campaign=' + encodeURIComponent(campaign) + '&custentity_ga_search_source=' + encodeURIComponent(source) + '&custentity_ga_search_medium=' + encodeURIComponent(medium) + '&custentity_ga_search_keyword=' + encodeURIComponent(term) + '&custentity_ga_search_content=' + encodeURIComponent(content) + '&custentity_ga_search_gclid=' + encodeURIComponent(gclid);
document.getElementById("nsIframeExitIntent").src = document.getElementById("nsIframeExitIntent").src + '&custentity_web_lead_nab_parameter=' + encodeURIComponent(params) + '&custentity_ga_search_campaign=' + encodeURIComponent(campaign) + '&custentity_ga_search_source=' + encodeURIComponent(source) + '&custentity_ga_search_medium=' + encodeURIComponent(medium) + '&custentity_ga_search_keyword=' + encodeURIComponent(term) + '&custentity_ga_search_content=' + encodeURIComponent(content) + '&custentity_ga_search_gclid=' + encodeURIComponent(gclid);
document.getElementById("nsIframe").src = document.getElementById("nsIframe").src + '&custentity_web_lead_nab_parameter=' + encodeURIComponent(params) + '&custentity_ga_search_campaign=' + encodeURIComponent(campaign) + '&custentity_ga_search_source=' + encodeURIComponent(source) + '&custentity_ga_search_medium=' + encodeURIComponent(medium) + '&custentity_ga_search_keyword=' + encodeURIComponent(term) + '&custentity_ga_search_content=' + encodeURIComponent(content) + '&custentity_ga_search_gclid=' + encodeURIComponent(gclid);
return false;
One final piece of key information. This is the actual iframe code:
<iframe id="nsIframeSidetab" src="<?php echo 'https://forms.na2.netsuite.com/app/site/crm/externalleadpage.nl?compid=3373305&formid=65&h=AACffht_oVPvzBS2Q5xRFMm3YXYganqAV-g%3D&url=' . rawurlencode( get_permalink()); ?>" width="100%" height="350" frameborder="0" scrolling="no"></iframe>
Part of the difficulty here is that the iframe src
itself is using a PHP function to dynamically populate the first part of the URL. It's a WordPress site, so it's pulling in the permalink (URL of the current page). Then after that permalink, the rest of the parameters are appended to the URL via JavaScript. Hopefully that all makes sense.
Any thoughts or suggestions on how to do this (steps #1-4 above) would be much appreciated! Thanks!