I am using AngularJS to dynamically load the emails content. Everything works perfectly fine until the moment when I load email with html content and with own css style. Then style from email affects style in my application.
For example if in email body is css directive p { color: #f00; }
p { color: #f00; }
, then in my entire app all paragraphs change color to red.
How to separate email styles from application styles?
Thanks in advance!
PS. My code looks like
$scope.loadMessage = function(message_uid){
$scope.loadingMessage = true;
$http({
url: baseApiURL + 'mail/' + message_uid,
method: 'GET',
headers: {'Authorization': userApiKey},
}).then(showMessage, errorDuringLoadMessage);
showMessage = function(r) {
$scope.message.body = $sce.trustAsHtml(r.data.message);
$scope.message.subject = r.data.subject;
$scope.message.from = r.data.from;
$scope.loadingMessage = false;
};
/* ... */
};
And view:
<div class="panel panel-success">
<div class="panel-body" ng-hide="loadingMessage" ng-bind-html="message.body">
</div>
The easiest way I can think of doing this is writing it into an iframe.
var frame = document.createElement('iframe');
/* position, style, and append iframe here... */
var frameDoc = frame.contentWindow.document;
frameDoc.open();
frameDoc.write($scope.message.body);
frameDoc.close();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.