title: How to access Polymer variables from outside Polymer
body: <p>I have this element which contains a tinymce html editor as an iframe. It works perfectly when sending the text data to the editor via url parameter. However, the size of url parameter are limited and I need to find a way to send the text data to the iframe.</p>
  
  <p>Inside the iframe I can call window.parent.getTemplate().
  The function getTemplate gets only found when its inside a normal javascript tag:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function getTemplate(){
          return 'xyz';
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>If its inside the polymer script, it doesn't get found.</p>
  
  <p><strong>My question:</strong></p>
  
  <p>How can I access the Polymer variable 'emailtemplate' from inside the getTemplate() function?</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function getTemplate(){
          return 'xyz';
    }
  &lt;/script&gt;
  
  &lt;polymer-element name="crm-emailtemplate-editor" extends="core-overlay" backdrop attributes="emailtemplate"&gt;
  
    &lt;template&gt;
  
      &lt;core-scroll-header-panel flex&gt;
          &lt;div class="core-header" horizontal layout reverse center&gt;
              &lt;core-toolbar&gt;
                  &lt;core-icon-button icon="close" on-tap="{{closeTapped}}"&gt;&lt;/core-icon-button&gt;
                      &lt;paper-input label="Name" value="{{emailtemplate.et_name}}"&gt;&lt;/paper-input&gt;
                  &lt;core-icon-button icon="save" on-tap="{{saveTapped}}"&gt;&lt;/core-icon-button&gt;
              &lt;/core-toolbar&gt;
            &lt;/div&gt;
  
            &lt;div id="content" class="content"&gt;
  
              &lt;iframe id="editor" src="html-editor.php"&gt;&lt;/iframe&gt;
  
            &lt;/div&gt;
  
          &lt;/core-scroll-header-panel&gt;
  
    &lt;/template&gt;
  
  
    &lt;script&gt;
      Polymer({
          publish:{
              emailtemplate:{}    
          }
      });
    &lt;/script&gt;
  &lt;/polymer-element&gt;
  </code></pre>
  
  <p>Thats the iframe where the getTemplate() function is called at init.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;&lt;!-- CDN hosted by Cachefly --&gt;
  &lt;script src="//tinymce.cachefly.net/4.1/tinymce.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  tinymce.init({
      selector: "textarea",
      theme: "modern",
      plugins: [
          "advlist autolink lists link image charmap print preview hr anchor pagebreak",
          "searchreplace wordcount visualblocks visualchars code fullscreen",
          "insertdatetime media nonbreaking save table contextmenu directionality",
          "emoticons template paste textcolor colorpicker textpattern"
      ],
      toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
      toolbar2: "print preview media | forecolor backcolor emoticons",
      image_advtab: true,
      templates: [
          {title: 'Test template 1', content: 'Test 1'},
          {title: 'Test template 2', content: 'Test 2'}
      ],
      image_list: "../image_list.php",
  
      setup: function (ed) {
          ed.on('init', function(args) {
              // var htmlcontent = getQueryVariable('content');
              // tinyMCE.activeEditor.setContent(decodeURIComponent(htmlcontent));
              tinyMCE.activeEditor.execCommand('mceFullScreen');
  
              // get emailtemplate content to display
              var tpl = window.parent.getTemplate();
              tinyMCE.activeEditor.setContent(tpl);
          });
  
          ed.on('change', function(e) {
              console.log('change event', e);
              var htmlcontent = tinyMCE.activeEditor.getContent();
              document.getElementById("htmlContent").innerHTML = htmlcontent;
  
          });
  
          ed.on('NodeChange', function(e){
              console.log('change event', e);
              var htmlcontent = tinyMCE.activeEditor.getContent();
              document.getElementById("htmlContent").innerHTML = htmlcontent;
           });
      }
  });
  
  function getQueryVariable(variable) {
    // GET Parameter
    var query = window.location.search.substring(1);
    var vars = query.split("&amp;");
    for (var i=0;i&lt;vars.length;i++) {
      var pair = vars[i].split("=");
      if (pair[0] == variable) {
        return pair[1];
      }
    } 
    alert('Query Variable ' + variable + ' not found');
  }
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
          &lt;textarea id="editor" name="content" style="width:100%"&gt;Easy!&lt;/textarea&gt;
          &lt;htmlcopy id="htmlContent"&gt;&lt;/htmlcopy&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>