javascript link to open new page and then set source for iframe

DesiLogi · January 27, 2021

I've got a dropdown menu that I need the links to run a function in order to open a new window (in '_self') and then change that new window's iframe source (same domain as parent).

I'm calling the function from a linked js file that runs the code correctly but ONLY if the new window is opened in a new tab. I've seen a lot of posts about how to transfer the js function to the new window but none of them if it's opened '_self'. Here's what I have so far (It's on a test server right now, hence the 127 address for the js file):

function newWindow() {
  var win = window.open('projects/project-dashboard','_self');
  win.document.head.innerHTML = '<title></title></head>';
  win.document.body.innerHTML = '<body></body>';
  var script = document.createElement('script');
  script.type = "text/javascript";
  script.src = 'http://127.0.0.1:9090/js/projnav.js';
  win.document.head.appendChild(script);
}

The file js/projnav.js has a function that needs to run in the new window, and it does but only when opened in '_blank'. Does anyone know how to modify this to run the projnav.js function if the new window is opened in the same tab? Any help with this would be really appreciated!

Edited February 1, 2021 by DesiLogi
Got closer to a solution and don't want to waste anyone's time on old version of question.

DesiLogi · January 31, 2021

I updated the original post with a closer, better solution and so have deleted this post.

Edited February 1, 2021 by DesiLogi
Got closer to a solution and don't want to waste anyone's time on old version of question.

DesiLogi · January 31, 2021

Ok I finally figured it out, if anyone needs this solution in the future. The first post in this thread shows how to dynamically update the source of an iframe in a new window, in a new tab, but I needed to do this in the same tab and the js code kept getting wiped out when the new location was opened (I tried to append script to the new page's head, etc. but never could get it to work).

So the solution to opening a new location/datapage in the same tab and dynamically setting the source for an iframe is to use Caspio's unique abilities in conjunction with regular js/html. Sometimes it's a lot simpler using Caspio in a hybrid scenario, deceptively so.

Passing a parameter that tells the new page what js function to run is the way to do it, simpler than the complicated solution I thought was required.

In a dropdown menu in a datapage use a link like <a href="newpage/dashboard?ProjectID=[@field:ProjectID]&ifr=ti" target="_self">Time Tracking</a>

This will send a parameter called 'ifr' to the new page (same tab) with a value of 'ti' (for 'Time'). Standard Caspio stuff.

Then in the datapage that opens in the new webpage (same tab) you catch the 'ifr=ti' as an external parameter in a Virtual field. In that same datapage, in the header use code to get that Virtual field's value and run a function that calls the code/function that actually changes the iframe's source.

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {
    var v_ifr = document.getElementById("cbParamVirtual1").value;

if (v_ifr == "t")  {
    setTimeout(function() { ifrtasks(); 
}, 500);    
} 

if (v_ifr == "cal")  {
    setTimeout(function() { ifrcalendar(); 
}, 500);    
} 

if (v_ifr == "ti")  {
    setTimeout(function() { ifrtime(); 
}, 500);    
} 

} 

});
</script>

I use the SetTimeout function to delay calling the code half a second so that the rest of the page loads (there are a couple datapages hosted on the destination html page that has the iframe in it and I want them to load before the frame changes sources).

In the above code, the datapage registers the 'ifr' value (that the menu link sent) and selects which function to call. If the 'ifr' value is 'ti' it calls a function called 'ifrtime'. That function is actually in the host html page itself (see below for why) but you could have it here in the datapage, if you want to. One of the things I've learned with Caspio is there's a lot of transference between datapages and the host html site for js and css and such, back and forth- meaning you can call a function from a datapage that is actually on the host page or in the site's js file. This gives a great amount of flexibility.

So the actual code for changing the iframe source (located in the host page itself) is:

  <script type="text/javascript">
   function ifrtasks() {
    var params = window.location.search;

    document.getElementById('ifr').src = '../project-dashboard-tasks' + params;
    document.getElementById("tasks").focus(); 
}
  
   function ifrcalendar() {
    var params = window.location.search;

    document.getElementById('ifr').src = '../project-dashboard-calendar' + params;
    document.getElementById("events").focus(); 
}
  
   
   function ifrtime() {
    var params = window.location.search;
    var loca = "&timelink=pd";
    var urlend = params + loca;
    document.getElementById("time").focus(); 

    document.getElementById('ifr').src = '../project-dashboard-time' + urlend;
}
  
  </script>

And the function 'ifrtime' is called and that updates the iframe source (and some other stuff, like setting a button's focus that looks like a tab).

**To get iframes to really work with Caspio you need to be able to solidly pass parameters from the host page to the source datapage in the iframe. The way to do this is via code in the host page. It gets the 'structure' of the host page when it loads, including any parameters, and makes it available to js, which can then be passed onto the iframe's source datapage (via the variable called 'params).

<script>

window.addEventListener('DOMContentLoaded', (event) => {
    console.log('DOM fully loaded and parsed');
    var params = window.location.search;

});

 </script>

So that's how the parameter from one Caspio datapage is sent to another host page in new location in the same tab, then transferred to an iframe's source datapage.

If you use the whole scenario above you can have dropdown menus all over your app that open different datapages (each hosted on a unique html page) in a single iframe on one host page. This can give a really rich, intuitive experience for the user, if done right.

Long story short, I posted this whole scenario because it's one of the things that really unlocks a lot of what's special about Caspio and I wish I'd known this when I started building my app. I hope others can use this kind of thing for their own purposes. Once you realize how to use Caspio, and that you must think about design differently, it can be really powerful.

Edited February 1, 2021 by DesiLogi
Wanted to post full solution.

Login

javascript link to open new page and then set source for iframe

Recommended Posts

DesiLogi

Link to comment

Share on other sites

DesiLogi

Link to comment

Share on other sites

DesiLogi

Link to comment

Share on other sites

Join the conversation

Browse