Generating the iFrame Code Block

You can generate the <iframe> block for a symbol directly from the web browser. You can then use this code block in an external website to view Industrial Graphics in run time.

1. Navigate to the graphic.

2. Click the Share icon .

3. In the Owning Object field, specify the Owning Object for this graphic.

4. The list of supported custom properties will be displayed. Select a custom property and provide a value.

   All values provided will be verified against the data type. For example, if a custom property requires an integer value, you will not be allowed to enter a character value.

5. Click Support cross origin to use the script on any Web Client, either on the local or remote machines.

   The embedded HTML code will change based on the selected options.

6. Click Copy.

7. You can now paste the generated code in your website in a .html file.

   <iFrame src="http://<hostname>/InTouch/?iframe=true&symbol=Sym1?crossOrigin=1" id="symbol" width="640px" height="480px" customProperty='[{"n":"CP1","v":"True","t":1},{"n":"CP2","v":"24.5","t":6},{"n":"CP3","v":"Orange","t":7}]' onload="postMsg()"></iFrame>

   <script type="text/javascript">

   function postMsg(){

   var iframe=document.getElementById('symbol');

   var obj={};

   for (var i=0;i<iframe.attributes.length;i++) {

   obj[iframe.attributes[i].nodeName]=iframe.attributes[i].nodeValue;

   }

   var win=iframe.contentWindow;

   win.postMessage(obj,obj['src']);

   };

   </script>

   If Language = French (France)

   <iFrame src="http://<hostname>/InTouch/?localeid=1036&iframe=true&symbol=Sym1" id="symbol" width="640px" height="480px" onload="postMsg()"></iFrame>

   <script type="text/javascript">

   function postMsg(){

   var iframe=document.getElementById('symbol');

   var obj={};

   for (var i=0;i<iframe.attributes.length;i++) {

   obj[iframe.attributes[i].nodeName]=iframe.attributes[i].nodeValue;

   }

   var win=iframe.contentWindow;

   win.postMessage(obj,'*');

   };

   </script>