将iframe的内容设置为聚合物元素

Question

I am trying to dynamically set the content of an iframe to a polymer element using the following code:

$(this.$.frame).contents().find('html').html("<custom-element></custom-element>");

Unfortunately, this doesn't work. (The iframe is just empty)

The interesting thing is that the code above works when you don't use a polymer element.

eg

$(this.$.frame).contents().find('html').html("This works");

works perfectly.

Thanks for your help.

Answer 1

I suspect that the issue is that the iframe is running with its own document context, and its own javascript context. That means that the custom elements you've registered in your document are unknown to the iframe.

Try:

var source = '<script src='path/to/platform/platform.js'></script>';
source += '<link rel='import' href='path/to/custom-element/custom-element.html'>';
source += '<custom-element></custom-element>';
$(this.$.frame).contents().find('html').html(source);