Accessing Div Value With Hype Button

iframe

#1

I must have a button in Hype check the value of a slider which is a div element in the HTML widget. I can get the value of an HTML widget input range but that won’t do for my specific situation. Inside the widget I can get the value just fine using a jQuery selector but for some reason it will not work in Hype when I attempt to get the element by ID. I have attached an example of my Hype project to this question and would greatly appreciate any help.

Thank you.

coloredSlider.hype.zip (14.1 KB)


(Mark Hunte) #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


#3

Thanks Mark!

I can only get this to work if the value is zero. Also, I didn’t add because I didn’t think it would be necessary, I will have multiple sliders in the same scene and I need all of their values and I need a way to differentiate between these values. Any clue how I could accomplish this?


(Mark Hunte) #4

Can you explain what you mean here ?


in your other slides call the message different names.

slideValue2, slideValue3 and so on.

i.e

window.parent.postMessage(['slideValue2', slideValue], '*');

Then in the listener function in the head determine which slide data is being posted by using that name.
You can do this in a simple switch statement .

 window.slideValue =0;
	  window.slideValue2 =0;
	  
    window.addEventListener('message', function(theEvent) {
    
     switch(theEvent.data[0]) {
    
    case 'slideValue':
          window.slideValue = theEvent.data[1];
          
        break;
        
    case 'slideValue2':
    
      window.slideValue2 = theEvent.data[1];
      
        break;
     
}
   
   
       
       
    }, false);
    
    
    
	</script>

(Jonathan Deutsch) #5

You’re using a HTML Widget for this; HTML Widgets are iframes and so the only real way to communicate is through the postMessage call @MarkHunte is describing.

However, I’d ask if this is necessary? It would probably work out better to not use an HTML Widget; you can simply make the div as a Hype element and run the javascript code on scene load. Here’s an example:

JquerySliderIntegration.hype.zip (14.2 KB)

I’ve added code to the Head HTML, a setup function on scene load, and modified the get val. The Hype Element itself has the ID set in Hype’s Identity inspector, though you could probably also make the div inside an element’s inner HTML if you need to style it differently.