Change URL of web object

[michaelm71636120]

Hi,

I'm using Captivate 9 (most recent version) and publish in HTML5.

On a slide, I have a web object. This web object is just another web page (e.g. the page with the URL www.example1.com).

There is also a button on the slide.

What I would like to have: If someone clicks that button, the web object will not show the page www.example1.com any longer, but the web page with the new URL www.example2.com instead. So I would like to change the URL which is called by the web object.

Question: How can I implement this task?

What I don't like to do: I could easily insert just a second web object with the second URL. However, I need to change the URL very often (or more precisely, show different parts of one page by using URLs with anchors). It doesn't make much sense to create 100 different web objects for this task which would make the project unnecessarily bloated.

It seems like to be a simple thing but I don't know how to do it with Captivate. Thank you very much in advance for any help!

[StevePixel]

Hi Micheal,

Interesting idea.. not so simple.

If I understand you correctly you have a single button with a single web object and inserted web URL. What you want to do is have your user click to a different URL by clicking the button. If that is correct here are the issues as I see them.

The linked web object URL can only support one URL at a time, in order for your plan to work the button will need to swap out the old URL and add the new one. Not sure you can do that with Captivate.

The other option might be to use an advanced action and "load URL or file" by clicking the button. You would also need to set up a really complex AA that increments the button and loads the next URL... not really sure if that is possible as well.

You may be better off having multiple buttons that loads different pages. I am certainly not the brightest Advanced Action user on these forums so I could easily be wrong.. but I will wait for others to answer.

Cheers

Steve

[Paul Wilson CTDP]

Why not have two web objects, one visible the other not. Make them exactly the same size and layer them over one another.

Create a variable to keep track of the current visibility of the first web object.

Write an Advanced action that will hide the visible web object and show the hidden web object. Update the variable used to keep track of the first web objects visibility. Your ELSE statement would just be the opposite of the initial Show / Hide / Update variable.

Perhaps something like this:

IF ( v_web_object_1 == 1)

      Show Web_Object_1

      Hide Web_Object_2

      Assign v_web_object_1 with 0

ELSE

      Show Web_Object_2

      Hide Web_Object_1

      Assign v_web_object_1 with 1

Tested and worked. You may wish to have an on enter advanced action that resets the visuals and variable back to the original states if the user returns to that page.

[RodWard]

I've got another suggestion.

If the different links you are talking about are just anchor points within the same web page, why not just build the required navigation into your web page itself rather than trying to do it via interactive objects that are OUTSIDE the web page and its iframe.  That way your web page remains in the iframe and doesn't get reloaded but your learner is clicking on objects that are coded into the page itself giving you better control.  Trying to do something like this in Captivate and having it talk to the web page would be a lot more complex.

[Justenuf2bdangerous]

I'm going to go with a less obvious strategy and see if it removes your problem with too many objects on the page:

How about

1. Creating multiple states for your web object

2. populating each state with the desired urls

3. Creating a button to "go to next state" of the web object

Just ran it on my computer and it seemed to work in preview - give it a shot and let us know.

[michaelm71636120]

Thank you for the answers so far!

Opening an URL in an extra window (or the same window) in an advanced action does not solve the problem because I need the web object in a frame with a specific size and I need to be able to manipulate (hide / show / animate ...) the object.

Rod, in case of the button your suggestion would work fine. However, the button was only an example. I would like to change the web page also by advanced actions (and these are executed on the page outside the web object).

Using different states for the web object is a nice idea! So I really don`t need so many objects. But I don`t know whether it would make the project a bit "heavy" as I think all of these statuses will be created as extra objects by Captivate. And I have to be sure that the page (with the different anchor points) will be loaded only once and will remain in the cache. I don't know whether Captivate is "clever" enough to do so when using different statuses.

I think changing the URL in the web object should not be too difficult. 90 % of it is solved in the following thread: Communication with web object  I just need the other way round (CP -> web object).

There would be also great other possibilities: Talking to the web object (using JavaScript) would make it possible to open URLs depending on variables (e.g. www.example.com/$$variable$$).

[michaelm71636120]

So let me give an update on this topic! It is almost working now. I describe how I can jump to different anchors in the web object:

Step 1: In the web object (an HTML file) I define an anchor, for example <h1 id="anchor1">Some headline</h1>

Step 2: In the head of the web object HTML file I define a function as follows:

<script>

$(document).ready(function()

{

  window.parent.jumptoAnchor = function()

{

    window.location.hash = 'anchor1';

}

});

</script>

I also included jquery 3.1.1 in the head.

Step 3: I include the web object in my Captivate project. Now I can change the web object (namely jump to the anchor position) from outside by executing the following JavaScript (in the Captivate Common JS Interface): jumptoAnchor();

It is working fine on Firefox, Edge, Safari Mac...

Problem: It still doesn't work on Chrome and Safari on iPads!

Question: How do I have to modify the function code to make it work on Chrome and iPads? I think this problem is a general JS related issue and has nothing to do with Captivate.

Here I used the hints given by donalall in Communication with web object

Any help is greatly appreciated! Any JS gurus here?

[TLCMediaDesign · Accepted solution]

Just execute this JavaScript in the JavaScript window:

document.getElementsByTagName("iframe")[0].src="http://www.newWebsite.com/"

[michaelm71636120]

Thank you so much! This is a really easy solution - very helpful!