35 Replies
Jacqui Yoo
7 years ago02/08/17 at 10:40 pm (UTC)
Linus NoName

For future reference for others, you can do to it like this for html5. In the slide where the webobject exists, create a new Javascript that starts at the beginning of the timeline. The script below is my interpretation of how to solve the OP's problem:

// Find and change the src part of the iframe (this will take the first webobject in the storyline, therefore [0]. If you want the second one, use [1], etc..
var iFrameElem = document.getElementsByClassName('item webobject')[0];

var src = "http://mywebobject.com/mysite.php"

var player = GetPlayer();

var var1 = player.GetVar("info1");

var var2 = player.GetVar("info2");

// Add together the finished url with querystrings

var finishSrc = src + "?info1=" + var1 + "&info2=" +  var2;
iFrameElem.setAttribute('src', finishSrc);

Thanks, Linus!

This worked, but I had to change the class from 'item webobject' to 'item webobject unhideable', as the containing div also uses the class 'item webobject'.

I was not initially clear, but the order of the web object [0] for first, [1] for second, etc. is specific to the slide, and not the entire project.

I am using Storyline 2, Update 11.

John Boulay
almost 7 years ago05/01/17 at 12:13 pm (UTC)
Matthew Bibby

Something like this should do the trick Christian:

var player = GetPlayer();
if (/html5/.test(window.location.href)) {
    player.SetVar("Output","HTML5");
  } else {
    player.SetVar("Output","Flash");
}

You'll need a text variable in Storyline called Output for this to work.

The JS will simply update that variable with either HTML5 or Flash, depending on which output is being viewed.

Very helpful html5 test Matthew, love simplified code, thanks!

LaRhonda Jefferson
over 2 years ago07/30/21 at 3:13 am (UTC)

I realize it has been some time since this last post, however, I'm still trying to get the above code to work. I found a storyline file that contained the the following script and it' works perfectly until you change the URL to something else. I've tried a number of different urls, but I'm not getting any of them to open. I can't even get https://www.articulate.com to open.

Ultimately, what I'm wanting to do is create a url by passing a a variable.

https://lab4.nog-oc.org/Variable1@netops.org/

I've tried everything with no luck. Anyone have any thoughts?

LaRhonda

Jean-Guy Boulay
over 2 years ago07/30/21 at 4:03 pm (UTC)

I believe the function OpenWebObject was deprecated since "story.js" is no longer used.
You can target a web object (containing a transparent png) that you place in the story though.
I tried it out and it is loading with Jacqui Yoo's modified script (attached).

Alternatively, if you are feeling adventurous, you could create an iframe element dynamically and target its content window with your new URL. I've never done this with a full site, but I have done this with audio. I just don't know how it would impact the main storyline project.

Kris N
over 2 years ago08/02/21 at 12:12 am (UTC)

Just be mindful - iFrames break a lot of security; and in some browsers, don't function as they once did (part of this has to do with stricter https enforcement, and disallowing the behaviour that iFrames allowed). iFrame's were always "a bad idea(tm)" -- its just that they provided a work around for many for such a long time.

Jean-Guy Boulay
over 2 years ago08/03/21 at 1:00 pm (UTC)

Yes, it's hit or miss when connecting to external websites depending on permissions set on the server. Storyline WebObjects are entirely built on an iframe, do an 'inspect' and search the code for the word and you'll see what I mean. When you run locally embedded content through the web object it's running content in the same location so it won't throw up security flags to the browser.  When I tested the script I was only able to load up Imgur images, a course hosted on my server, and the Elearning heroes community website; anything else was blocked.

Sherri Sagers
2 years ago03/11/22 at 8:50 pm (UTC)

Thanks everyone! I was able to use Jean-Guy's version to show a Smartsheet form inside a Storyline object. This is the code that worked for me:

var player = GetPlayer();

//This will work with the first iframe on the slide with the class name of "shown"
var iFrameId = document.getElementsByClassName('shown')[2];
console.log(iFrameId);

var src="https://app.smartsheet.com/b/form/12345";

var score=player.GetVar ("Score");

//Build the smartURL here > var fullurl = src + "?var1=" + value1 + "&var2=" + value2;
var fullurl = src + "?Quiz=" + score;

//Send the new smartURL to the web object
iFrameId.setAttribute('src', fullurl);

Sign In to Reply