追加HTML内容的角度JS一个iframe [英] Append html content to an iframe in Angular JS
问题描述
我想创建一个完全成熟的HTML文档的preVIEW，这意味着这个网站的内容本身就是一个完整的HTML文档＆LT; HTML＆GT; ，＆LT; HEAD＆GT; ，＆LT;车身方式＆gt; 标签
如果我只是加载html文件到我现有的HTML根，那么所有的风格将在新加入的HTML文档中定义的覆盖。如果我有超过SRC一个iframe这个html文件（＆LT; iframêSRC =路径/要/ doc.html＆GT; ），那么它的工作原理。然而，这doc.html是一个模板，我需要更换，我曾与自定义标签注明的某些部分。我通过执行以下code这样
$。获得（'模板/ template.html'，函数（模板）{ String.prototype.format =功能（）{
变参=参数;
this.unkeyed_index = 0;
返回this.replace（/ \\ {（\\ W *）\\} /克，功能（匹配键）{
如果（键===''）{
关键= this.unkeyed_index;
this.unkeyed_index ++
}
如果（键== +键）{
返回ARGS [关键] ==未定义
？ ARGS [关键]
： 匹配;
}其他{
对于（VAR I = 0; I＆LT; args.length;我++）{
如果（typeof运算ARGS [I] ==='对象'和;＆安培; typeof运算ARGS [I] [关键] ==未定义！）{
返回ARGS [I] [关键]
}
}
返回匹配;
}
} .bind（本））;
}; VAR renderedHtml = template.format（{打招呼：嘿}）;
}）;
到目前为止，这工作正常。在变量 renderedHtml 我有完整的HTML文档和占位符被替换（在这种情况下，占位符打招呼被替换为哎那里。
无我有以下的HTML片段
＆LT; IFRAME ID =测试＆GT;＆LT; / IFRAME＆GT;
和我尝试以下code：
VAR ELEM =使用document.createElement（'DIV'）;
elem.innerHTML = renderedHtml;
的document.getElementById（'测试'）的appendChild（ELEM）。
$编译（ELEM）（$范围内）;
不幸的是，没有任何的看法改变了。但是，如果我叫的appendChild（ELEM）在 document.body的然后它工作。有谁知道这个问题可能是什么？
P.S。我知道，你不应该做的DOM操作在你的角度控制器代替$编译，你应该用指令去做。但是，如果这样的作品那么我很乐意尝试将其重构为一个指令。）
我不得不这样做类似于你在做什么东西。我需要做一些HTML模板编辑器。模板没有preVIEW以及由于在现有的站点中的CSS，所以我想，以显示在iframe的模板。
我能够做出的角度指令在它一只手表，将更新： iframe.contentDocument.body.innerHTML 键，让我我想要的效果。我相信你将能够拦截此内容，并为占位符任何替换模板内为好。
下的 preVIEW 的指令应该帮助你对你的方式，如果你仍然需要它毕竟这个时候。
VAR应用= angular.module（'应用'，[]）;\r
\r
app.controller（续功能（$范围）{\r
$ scope.content =你好！;\r
}）;\r
\r
app.directive（preVIEW功能（）{\r
功能链接（范围，元素）{\r
VAR IFRAME =使用document.createElement（'IFRAME'）;\r
变种element0 =元素[0];\r
element0.appendChild（IFRAME）;\r
VAR体= iframe.contentDocument.body;\r
\r
范围。$腕表（'内容'，函数（）{\r
body.innerHTML = scope.content;\r
}）;\r
}\r
\r
返回{\r
链接：链接，\r
限制：'E'，\r
范围： {\r
内容：'='\r
}\r
};\r
}）; \r
输入，IFRAME {\r
边框：1px的固体黑色;\r
宽度：100像素;\r
}\r
preVIEW的iframe {\r
高度：50像素;\r
} \r
＆LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
＆LT; DIV NG-应用=应用程序NG控制器=续＆GT;\r
＆LT;输入NG模型=内容类型=文本/＆GT;＆LT; BR /＆GT;\r
＆LT; preVIEW内容=内容＆GT;＆LT; / preVIEW＆GT;\r
＆LT; / DIV＆GT; \r
I am trying to create a preview of a full fledged html document, meaning this html content is itself a complete html document with <html>, <head>, <body> tags.
If I would just load that html document into my existing html root, then all styles will be overridden by the ones defined in the newly included html doc. If I include this html document with an iframe over src (<ifram e src="path/to/doc.html">) then it works. However, this doc.html is a template where I need to replace certain parts which I have annotated with custom tags. I am doing this by executing the following code
$.get('template/template.html', function (template) {
String.prototype.format = function () {
var args = arguments;
this.unkeyed_index = 0;
return this.replace(/\{(\w*)\}/g, function (match, key) {
if (key === '') {
key = this.unkeyed_index;
this.unkeyed_index++
}
if (key == +key) {
return args[key] !== 'undefined'
? args[key]
: match;
} else {
for (var i = 0; i < args.length; i++) {
if (typeof args[i] === 'object' && typeof args[i][key] !== 'undefined') {
return args[i][key];
}
}
return match;
}
}.bind(this));
};
var renderedHtml = template.format({hello: "hey there"});
});
So far this works fine. In the variable renderedHtml I have my complete html document and the placeholders are being replaced (in this case the placeholder hello is being replaced with "hey there".
No I have the following html snippet
<iframe id="test"></iframe>
and I tried the following code:
var elem = document.createElement('div');
elem.innerHTML = renderedHtml;
document.getElementById('test').appendChild(elem);
$compile(elem)($scope);
Unfortunately, nothing changes on the view. However, if I call appendChild(elem) on document.body then it works. Does anyone know what the problem could be?
P.S. I know that you should not do DOM manipulations in your angular controller and instead of $compile you should do it with a directive. However, if this way works then I am happy to try to refactor it to a directive :).
I had to do something similar to what you're doing. I needed to make an editor for some HTML templates. The templates didn't preview well due to the CSS in the existing site, so I thought to display the template in an iframe.
I was able to make an angular directive with a watch in it which would update: iframe.contentDocument.body.innerHTML and got me my desired effect. I believe you would be able to intercept the content here and make any replacements for placeholders inside your template as well.
The preview directive below should help you on your way, if you still need it after all this time.
var app = angular.module('App',[]);
app.controller("Cont", function($scope){
$scope.content = "Hi there!";
});
app.directive("preview", function () {
function link(scope, element) {
var iframe = document.createElement('iframe');
var element0 = element[0];
element0.appendChild(iframe);
var body = iframe.contentDocument.body;
scope.$watch('content', function () {
body.innerHTML = scope.content;
});
}
return {
link: link,
restrict: 'E',
scope: {
content: '='
}
};
});
input, iframe {
border: solid 1px black;
width: 100px;
}
preview iframe {
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App" ng-controller="Cont">
<input ng-model="content" type="text" /><br />
<preview content="content"></preview>
</div>
这篇关于追加HTML内容的角度JS一个iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
