Javascript 如何从聚合物外部访问聚合物变量
我有这个元素，它包含一个tinymce html编辑器作为iframe。当通过url参数将文本数据发送到编辑器时，它可以完美地工作。然而，url参数的大小是有限的，我需要找到一种方法将文本数据发送到iframeJavascript 如何从聚合物外部访问聚合物变量,javascript,html,iframe,polymer,tinymce-4,Javascript,Html,Iframe,Polymer,Tinymce 4,我有这个元素，它包含一个tinymce html编辑器作为iframe。当通过url参数将文本数据发送到编辑器时，它可以完美地工作。然而，url参数的大小是有限的，我需要找到一种方法将文本数据发送到iframe <core-localstorage name="ninja_localStorage-emailtemplate" value="{{emailtemplate.et_content}}"></core-localstorage> 在iframe内部，我可以调
<core-localstorage name="ninja_localStorage-emailtemplate" value="{{emailtemplate.et_content}}"></core-localstorage>
<script type="text/javascript">
function getTemplate(){
return 'xyz';
}
</script>
函数getTemplate（）{
返回'xyz'；
}
<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（）{
返回'xyz'；
}
聚合物({
出版：{
emailtemplate:{}
}
});
<!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>
tinymce.init({
选择器：“文本区域”，
主题：“现代”，
插件：[
“advlist autolink列出链接图像charmap打印预览hr锚定页面中断”，
“searchreplace wordcount visualblocks visualchars代码全屏显示”，
“insertdatetime媒体非中断保存表上下文菜单方向性”，
“表情模板粘贴文本颜色选择器文本模式”
],
工具栏1：“插入文件撤消重做|样式选择|粗体斜体|对齐左对齐中心对齐右对齐对齐对齐|粗体numlist outdent缩进|链接图像”，
工具栏2：“打印预览媒体|前景色背景表情”，
图像\u advtab：正确，
模板：[
{标题：'测试模板1'，内容：'测试1'}，
{标题：'测试模板2'，内容：'测试2'}
],
image\u list:“../image\u list.php”，
设置：功能（ed）{
ed.on（'init'，函数（args）{
//var htmlcontent=getQueryVariable（'content'）；
//tinyMCE.activeEditor.setContent（decodeURIComponent（htmlcontent））；
tinyMCE.activeEditor.execCommand（'mcuellscreen'）；
//获取要显示的emailtemplate内容
var tpl=window.parent.getTemplate（）；
tinyMCE.activeEditor.setContent（tpl）；
});
教育署署长（‘更改’，职能（e）{
console.log（'change event'，e）；
var htmlcontent=tinyMCE.activeEditor.getContent（）；
document.getElementById（“htmlContent”）.innerHTML=htmlContent；
});
ed.on（'NodeChange'，函数（e）{
console.log（'change event'，e）；
var htmlcontent=tinyMCE.activeEditor.getContent（）；
document.getElementById（“htmlContent”）.innerHTML=htmlContent；
});
}
});
函数getQueryVariable（变量）{
//获取参数
var query=window.location.search.substring（1）；
var vars=query.split（&）；
对于（var i=0；i我认为您的问题只是因为您没有等待聚合物准备就绪。您必须在Polymer ready
事件之前添加一个侦听器，以希望安全使用Polyfill
编辑：
很抱歉，我看错了。所以，您可以使用我上面所说的方法，像窗口方法一样定义getTemplate方法
// Your external method.
var getTemplate = function(){
var editor = document.querySelector("crm-emailtemplate-editor");
return editor.emailtemplate;
}
我用叉子叉了我以前的一顿
我最终使用localStorage将数据发送到iframe
<core-localstorage name="ninja_localStorage-emailtemplate" value="{{emailtemplate.et_content}}"></core-localstorage>
非常感谢！！！但是我想从iFrame调用getTemplate。（我已经添加了上面的代码）。iFrame位于crm-emailtemplate-editor.html中，而它本身又位于crm-template-overview.htmlTanks中！但是它找不到带有document.querySelector（“crm-emailtemplate editor”）的编辑器；我最终使用本地存储将数据发送到iframe..不知道这是否是最好的解决方案，但它有效..@JFathi您是否尝试在Polymer就绪时定义getTemplate方法（进入回调“Polymer ready”）？您是否尝试通过ID检索元素？我感到惊讶和抱歉。如果您想删除本地存储使用，我可以查看代码的这一部分。