Question

Returning a value from a secondary external form

Forms

Updated December 14, 2017

asked on November 16, 2017

My objective is to be able to open an ESRI map hosted on one of our other servers and return a set of coordinates to a field within Laserfiche Forms. At this point I'm just trying to return any value and have LF Forms recognize it. All I get back is undefined or nothing at all.

I'll be forthright and say that I'm not much of a web developer, so I might just be missing something basic, but I've tried several ways that I've gotten to work successfully with non-Laserfiche web pages and I'm hitting a wall. I'm wondering if there is a security restriction or something I don't know about, but I don't see any errors in the event logs.

My forms code (trying multiple methods):

$(document).ready(function () {

function HandlePopupResult(result) {
alert("result of popup is: " + result);
}

});

$(function() {
$(".radiobutton").change(function () {

var win = window.open("http://testserver/DSL_Test/test_returnval.html", "MyDialog", 300, 300, "menubar=0,toolbar=0");
var timer = setInterval(function ()
{
if (win.closed)
{
clearInterval(timer);
var myreturnValue = win.returnValue;
alert("myReturnvalue is: " + myreturnValue);
$(".Coordinates input").val(myreturnValue);
callback(myreturnValue);
}
}, 500);
});
});

My test child page:

<!DOCTYPE html>
<html>
<head>
<script>

function CloseMySelf(sender) {
try {
window.opener.HandlePopupResult(sender.getAttribute("result"));
window.parent.returnValue = "hi there";
}
catch (err) {}

window.close();
return false;
}

</script>

<a href="#" result="allow" onclick="return CloseMySelf(this);">Allow</a>
<a href="#" result="disallow" onclick="return CloseMySelf(this);">Don't Allow</a>

Thanks for any help you can give!

0 0

Replies

replied on December 6, 2017 • Show version history

I've run into a lot of issues in the past with communicating between browser windows using JavaScript. The only really reliable way I've seen of doing this is if the web page in both windows is from the protocol (http vs https) and domain (google.com).

It sounds like the pages in your example above are in different domains which could be one reason for the message coming back undefined. For this, you could try window.postMessage. I've used this in other projects and it works well. Be sure to read the documentation in the link. There are some browser restrictions on this and some common security concerns to be aware of that are discussed (such as checking the origin of the message).

To send a message from the opened window:

var data = {...};
window.parent.postMessage(data);

To receive the message in the original window:

$(window).on('message', function (e) {
    var evt = e.originalEvent || e;
    var data = evt.data;
});

This could also allow you to remove the interval all together. I'm not sure what "callback" references in your code, but you could possibly call that callback method from within the event handler.

1 0

replied on December 6, 2017

Both pages are in the same domain, but hosted on different servers. Most of the code was examples I found from around the web, none of it is necessary, just things I tried to get something to post back to the parent form. I can get rid of the callback completely.

Thank you for the suggestion, I'll give window.postMessage a try.

0 0

replied on December 6, 2017

I think Michael's postMessage is the way to go. You should be able to get returnValue to work, right now I think your code it writing it to the parent and reading it from the child. The examples I've seen have the child writing to its own window.returnValue and the parent reading it the way you have it.

The HandlePopupResult function could also be causing a problem, if that fails due to browser security then the control flow will jump to the exception handler and the assignment to returnValue will be skipped.

0 0

replied on December 13, 2017

Thank you for the tips, it got me going in the right direction and I finally got it working:

Parent (Laserfiche Forms):

$(document).ready(function () {
  document.domain = 'dsl.state.or.us';
});

$(function() {
    $(".radiobutton").change(function () {
      
      var win = window.open("http://otherserver.dsl.state.or.us/DSL_Test/test_returnval5.html", "MyDialog", 300, 300, "menubar=0,toolbar=0");
  
      function receiveMessage(event){
 
        if (event.origin !== "http://otherserver.dsl.state.or.us") {
          alert("Source page not allowed, was: " + event.origin);
    		return;
          };
        
        //alert("message was: " + event.data);
		$('#q1 input').val(event.data);
	  };
      
     window.addEventListener("message", receiveMessage, false);
      
   });
      
});

Child page (was doing window.parent before, I think that was a lot of the issue):

window.opener.postMessage("123.111, 544.111","http://OurFormsServer.dsl.state.or.us")

I still have some work to do, but at least the core functionality is working now! Thanks.

0 0

replied on December 14, 2017

And of course this works on every single browser tested, including mobile, except IE...hate IE! Either back to the drawing board or a disclaimer to use another browser...

https://stackoverflow.com/questions/16226924/is-cross-origin-postmessage-broken-in-ie10

0 0

replied on December 14, 2017

To work around it I embedded the remote page in an iframe on a proxy page on the Laserfiche server, then passed the message from the remote page to the proxy, and then from the proxy page to Forms. What a pain!

0 0

You are not allowed to follow up in this post.

Question

Question

Returning a value from a secondary external form

Replies

Sign in to reply to this post.