Accessing Div Value With Hype Button

Using JavaScript with Hype
2

You can use postMessage to post an event, in this case the slider vale change.

I did this by adding :

 var slideValue =coloredSlider;
window.parent.postMessage(['slideValue', slideValue], '*');

to the refreshSwatch function

 function refreshSwatch() {
               var coloredSlider = $("#coloredSlider").slider("value")
                    , myColor = getTheColor(coloredSlider);
                    
                  var slideValue =coloredSlider;
                   window.parent.postMessage(['slideValue', slideValue], '*'); 

                $("#coloredSlider .ui-slider-range").css("background-color", myColor);

                $("#coloredSlider .ui-state-default, .ui-widget-content .ui-state-default").css("background-color", myColor);
            }

Then a listener in the Hype head file

<script type="text/javascript">

	 window.slideValue =0;

    window.addEventListener('message', function(theEvent) {
    if(theEvent.data[0] !== 'slideValue'){
    return;
    };
       window.slideValue = theEvent.data[1];
    }, false);
    
    
    
	</script>

Then we can get the value from the data that is past on with this in the button function.

alert(window.slideValue);

One things to note.

This works but I did read that posting a message to '*' which is a wild card is a bad idea as it could be hijacked .

But I have seen example on this site with similar methods that seems to be the norm

---------- What I read..

Security concerns

If you do not expect to receive messages from other sites, do not add any event listeners for message events. This is a completely foolproof way to avoid security problems.

If you do expect to receive messages from other sites, always verify the sender's identity using the origin and possibly source properties. Any window (including, for example, http://evil.example.com) can send a message to any other window, and you have no guarantees that an unknown sender will not send malicious messages. Having verified identity, however, you still should always verify the syntax of the received message. Otherwise, a security hole in the site you trusted to send only trusted messages could then open a cross-site scripting hole in your site.

Always specify an exact target origin, not *, when you use postMessage to send data to other windows. A malicious site can change the location of the window without your knowledge, and therefore it can intercept the data sent using postMessage.

I think you need to replace the '*' with the correct url of you main window.

@jonathan , @h_classen, can you clarify if this is a correct guard against this that could be used within a hype project