[fibo2358]

Hello All,

Could you help me and advise me how to catch the events related to the Panel?

I have created a dynaform with a panel (the panel id is "mypanel"). In the "content" property of the panel I have put an iframe
<iframe src="http://test.example.com/testfile.html" id="myframe" width="400" height="250" > </iframe>

I would like to catch the load event (or the click event) in JavaScript to run a function (myFunction), I tried several ways such as:

$("#mypanel").click ( myFunction );
document.getElementById("myframe").onclick = myFunction;

Unforunately nothing works. Please help.

Thanks in advance.

[amosbatto]

Clicks inside a frame don't bubble up outside the frame.
Both of these work, but they only work if you click on the border of the panel or the frame.

Code: Select all

$("#mypanel").click(function() {alert("hi panel")});
$("#myframe").click(function() {alert("hi frame")});

If you click inside the frame, then it won't work.

To get it to work, you need to set event handlers for elements inside your frame, such as the body of the frame.

[fibo2358]

Hello Amos,

Thank you for the reply.
Could you please tell me whether it is possible to catch load event regarding the panel or the frame?

[amosbatto]

I investigated this a bit further. If your iframe is like this:

Code: Select all

<iframe id="myFrame" src="http://example.com">

Then you can set an event handler inside the iframe with this jquery:

Code: Select all

$("#myFrame").contents().find("#myElementInsideFrame").click( myFunction );

However, you are not able to access the contents of an iframe with JavaScript if it violates that cross-origin policy of the web browser. If you are trying to use an iframe whose src is a different domain, than the one used by ProcessMaker, then JavaScript can't access anything inside the iframe for security reasons. See:
https://developer.mozilla.org/en-US/doc ... ntrol_CORS
http://stackoverflow.com/questions/3076 ... gin-policy

You can use CORS to get around this restriction. In the header of the page loaded by the iframe you need to include this:

Code: Select all

Access-Control-Allow-Origin: *

If you don't have access to the web server for that foreign web site, then you out of luck. If you do have access, then see this post:
https://benjaminhorn.io/code/setting-co ... g-through/

[fibo2358]

Hello Amos,

Thank you for the quick response.
The domains are the same. I will check the solution (at the moment it doesn't work, I will examine it thoroughly).

In the meanwhile, could you please tell me whether it is possible to catch the load event in the frame/panel?

[amosbatto]

The "load" event doesn't wait until the document finishes loading on Firefox, and jQuery's "ready" doesn't wait either. I haven't checked on the other web browsers.

The best solution is to add the Javascript to the page that iframe is trying to load, so it will execute when the page finishes loading. The other option is to use SetTimeout() to execute your JavaScript after a certain amount of time.

There are lots of suggestions here (most of them won't work), but everyone seems to have the same problem:
http://stackoverflow.com/questions/2376 ... oaded?rq=1