如何从 Polymer 外部访问 Polymer 变量

Question

我有一个包含 tinymce html 编辑器作为 iframe 的元素。通过 url 参数将文本数据发送到编辑器时，它工作得很好。但是，url 参数的大小是有限的，我需要找到一种方法将文本数据发送到 iframe。

在 iframe 中我可以调用 window.parent.getTemplate()。函数 getTemplate 仅在其位于普通 javascript 标签内时才会被发现：

<script type="text/javascript">
    function getTemplate(){
        return 'xyz';
  }
</script>

如果它在聚合物脚本中，则找不到。

我的问题：

如何从 getTemplate() 函数内部访问 Polymer 变量 'emailtemplate'？

<script type="text/javascript">
    function getTemplate(){
        return 'xyz';
  }
</script>

<polymer-element name="crm-emailtemplate-editor" extends="core-overlay" backdrop attributes="emailtemplate">

  <template>

    <core-scroll-header-panel flex>
        <div class="core-header" horizontal layout reverse center>
            <core-toolbar>
                <core-icon-button icon="close" on-tap="{{closeTapped}}"></core-icon-button>
                    <paper-input label="Name" value="{{emailtemplate.et_name}}"></paper-input>
                <core-icon-button icon="save" on-tap="{{saveTapped}}"></core-icon-button>
            </core-toolbar>
          </div>

          <div id="content" class="content">

            <iframe id="editor" src="html-editor.php"></iframe>

          </div>

        </core-scroll-header-panel>

  </template>


  <script>
    Polymer({
        publish:{
            emailtemplate:{}    
        }
    });
  </script>
</polymer-element>

这就是在初始化时调用 getTemplate() 函数的 iframe。

<!DOCTYPE html>
<html>
<head><!-- CDN hosted by Cachefly -->
<script src="//tinymce.cachefly.net/4.1/tinymce.min.js"></script>
<script>
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("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
      return pair[1];
    }
  } 
  alert('Query Variable ' + variable + ' not found');
}

</script>

</head>
<body>
        <textarea id="editor" name="content" style="width:100%">Easy!</textarea>
        <htmlcopy id="htmlContent"></htmlcopy>
</body>
</html>

Answer 1

我认为你的麻烦只是因为你没有等待 Polymer 准备好。您必须在 polymer-ready 事件上添加一个侦听器才能安全地使用 Polyfill。

Get a Polymer component property value from outside the element example.

编辑 :

我看错了，对不起。因此，您可以使用我所说的上述方式，并将 getTemplate 方法定义为 Window 方法。

// Your external method.
var getTemplate = function(){
  var editor = document.querySelector("crm-emailtemplate-editor");
  return editor.emailtemplate;
}

我分叉了我以前的 Plunk

Get an element property Polymer from an iframe who is inside the element itself.

Answer 2

我最终使用 localStorage 将数据发送到 iframe。

<core-localstorage name="ninja_localStorage-emailtemplate" value="{{emailtemplate.et_content}}"></core-localstorage>

并从 iframe 读取：

var contentFromStorage = localStorage.getItem('ninja_localStorage-emailtemplate');

如何从 Polymer 外部访问 Polymer 变量

How to access Polymer variables from outside Polymer

html

javascript

iframe

tinymce-4

polymer