I am very new to AngularJs and I have created a pretty nifty Modal factory. What I am trying to accompish and cannot figure it out is in the "text" for the modal inject and iFrame so I can display other HTML pages. I want to be able to just call my factory and then just specify the URL and the factory will do the work. I have created a Plunker to show what I have, and my attempts at injecting the iFrame
http://plnkr.co/edit/KGz4rWXlxfbJmyzBBwyP?p=preview
<div class="modal-header">
<h3 class="modal-title">{{alert_data.title}}</h3>
</div>
<div class="modal-body">
<h3>{{alert_data.text}}</h3>
<iframe src="http://www.w3schools.com"width="100%" height="100%"frameborder="0"></iframe>
</div>
<div class="modal-footer">
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
You're already passing scope to the modal in the 'alert_data' object, so just tack on the URL to it, expose it in the service as a parameter and bind it to the iframe src.
function alert(type, text, size, url) {
var template = type === 'success' ? 'template-success.html' : 'template-error.html';
var opts = {
size : size || 'sm'
};
var data = {
title : type === 'success' ? "OK" : "Ooops",
text : function(){return text},
url: url
};
return openModal(template, data, opts);
}
And then in the template:
<iframe ng-src="{{ alert_data.url }}" width="100%" height="100%" frameborder="0"></iframe>
You may also have to use the $sce service to trust the URL.
var url = $sce.trustAsResourceUrl("http://www.w3schools.com");
Here's an updated Plunkr as an example:
http://plnkr.co/edit/d1OLRdhc6vKr6OZa6GkN?p=preview
You could use use ng-src like this.
Note that you need to set your src as trusted by calling $sce.trustAsResourceUrl() (see this link for more information as to why it's needed). Line 27 and following:
controller: function ($scope, $uibModalInstance, $sce, alert_data) {
$scope.alert_data = alert_data;
$scope.iframeSrc = $sce.trustAsResourceUrl("http://www.w3schools.com");
js paste iframe:
var iframe = document.createElement('iframe');
iframe.setAttribute("src", "https://www.youtube.com/embed/test");
iframe.setAttribute("width", "100%");
iframe.setAttribute("height", "315");
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
document.getElementById("wrapper_video").appendChild(iframe);
for paste in html you need to inject $sce
return $sce.trustAsHtml(iframe);
Related
i am creating hidden iframe for printing some data, but my code is not working properly, i want to show some data in that iframe by using angular scope variable bellow is my code.
// print attached contract documnet
function print(imageData) {
var hiddenFrame = $('<iframe style="display: none"></iframe>').appendTo('body')[0];
hiddenFrame.contentWindow.printAndRemove = function () {
hiddenFrame.contentWindow.print();
$(hiddenFrame).remove();
};
$scope.testObj = 'testing';
var element = $compile('<div> {{testObj}} </div>')($scope);
// var element = $compile($('<div> <img ng-src="{{ vm.contractDetails.contractAttachment.imageSRC }}" class="img-thumbnail img-responsive img-height " style="height:500px;cursor:pointer;" /> </div>'))(printScope);
var htmlDocument = "<!doctype html>" +
"<html>" +
'<body onload="printAndRemove();">' +
element.html() +
'</body>' +
"</html>";
var doc = hiddenFrame.contentWindow.document.open("text/html", "replace");
doc.write(htmlDocument);
doc.close();
}
then output is not proper
$scope.testObj is not binding properly.
i want to show some data in that iframe by using angular scope
variable
Short answer
You cannot pass $scope to iframe regards to your configuration.
From image, angular didn't load inside iframe
[EDIT 1]
If you want to pass base64 image to iframe you don't need angular.
Just call:
<iframe src="data:application/pdf;base64,BINARY_DATA"></iframe>
If you want to use ng-src instead, to get rid of cross domain problem use $sce service:
<iframe ng-src="{{someStuff}}"></iframe>
$scope.someFrame= $sce.trustAsResourceUrl("http://www.yourURL.com");
[EDIT 2]
<iframe src="{{value}}"> </iframe>
Controller
app.controller('ctrlRead', function ($scope, $sce) {
$scope.value= $sce.trustAsResourceUrl("data:image/gif;base64,R0lGODlhPQBEAPeoAJosM//AwO/AwHVYZ/z595kzAP/s7P+goOXMv8+fhw/v739/f+8PD98fH/8mJl+fn/9ZWb8/PzWlwv///6wWGbImAPgTEMImIN9gUFCEm/gDALULDN8PAD6atYdCTX9gUNKlj8wZAKUsAOzZz+UMAOsJAP/Z2ccMDA8PD/95eX5NWvsJCOVNQPtfX/8zM8+QePLl38MGBr8JCP+zs9myn/8GBqwpAP/GxgwJCPny78lzYLgjAJ8vAP9fX/+MjMUcAN8zM/9wcM8ZGcATEL+QePdZWf/29uc/P9cmJu9MTDImIN+/r7+/vz8/P8VNQGNugV8AAF9fX8swMNgTAFlDOICAgPNSUnNWSMQ5MBAQEJE3QPIGAM9AQMqGcG9vb6MhJsEdGM8vLx8fH98AANIWAMuQeL8fABkTEPPQ0OM5OSYdGFl5jo+Pj/+pqcsTE78wMFNGQLYmID4dGPvd3UBAQJmTkP+8vH9QUK+vr8ZWSHpzcJMmILdwcLOGcHRQUHxwcK9PT9DQ0O/v70w5MLypoG8wKOuwsP/g4P/Q0IcwKEswKMl8aJ9fX2xjdOtGRs/Pz+Dg4GImIP8gIH0sKEAwKKmTiKZ8aB/f39Wsl+LFt8dgUE9PT5x5aHBwcP+AgP+WltdgYMyZfyywz78AAAAAAAD///8AAP9mZv///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAKgALAAAAAA9AEQAAAj/AFEJHEiwoMGDCBMqXMiwocAbBww4nEhxoYkUpzJGrMixogkfGUNqlNixJEIDB0SqHGmyJSojM1bKZOmyop0gM3Oe2liTISKMOoPy7GnwY9CjIYcSRYm0aVKSLmE6nfq05QycVLPuhDrxBlCtYJUqNAq2bNWEBj6ZXRuyxZyDRtqwnXvkhACDV+euTeJm1Ki7A73qNWtFiF+/gA95Gly2CJLDhwEHMOUAAuOpLYDEgBxZ4GRTlC1fDnpkM+fOqD6DDj1aZpITp0dtGCDhr+fVuCu3zlg49ijaokTZTo27uG7Gjn2P+hI8+PDPERoUB318bWbfAJ5sUNFcuGRTYUqV/3ogfXp1rWlMc6awJjiAAd2fm4ogXjz56aypOoIde4OE5u/F9x199dlXnnGiHZWEYbGpsAEA3QXYnHwEFliKAgswgJ8LPeiUXGwedCAKABACCN+EA1pYIIYaFlcDhytd51sGAJbo3onOpajiihlO92KHGaUXGwWjUBChjSPiWJuOO/LYIm4v1tXfE6J4gCSJEZ7YgRYUNrkji9P55sF/ogxw5ZkSqIDaZBV6aSGYq/lGZplndkckZ98xoICbTcIJGQAZcNmdmUc210hs35nCyJ58fgmIKX5RQGOZowxaZwYA+JaoKQwswGijBV4C6SiTUmpphMspJx9unX4KaimjDv9aaXOEBteBqmuuxgEHoLX6Kqx+yXqqBANsgCtit4FWQAEkrNbpq7HSOmtwag5w57GrmlJBASEU18ADjUYb3ADTinIttsgSB1oJFfA63bduimuqKB1keqwUhoCSK374wbujvOSu4QG6UvxBRydcpKsav++Ca6G8A6Pr1x2kVMyHwsVxUALDq/krnrhPSOzXG1lUTIoffqGR7Goi2MAxbv6O2kEG56I7CSlRsEFKFVyovDJoIRTg7sugNRDGqCJzJgcKE0ywc0ELm6KBCCJo8DIPFeCWNGcyqNFE06ToAfV0HBRgxsvLThHn1oddQMrXj5DyAQgjEHSAJMWZwS3HPxT/QMbabI/iBCliMLEJKX2EEkomBAUCxRi42VDADxyTYDVogV+wSChqmKxEKCDAYFDFj4OmwbY7bDGdBhtrnTQYOigeChUmc1K3QTnAUfEgGFgAWt88hKA6aCRIXhxnQ1yg3BCayK44EWdkUQcBByEQChFXfCB776aQsG0BIlQgQgE8qO26X1h8cEUep8ngRBnOy74E9QgRgEAC8SvOfQkh7FDBDmS43PmGoIiKUUEGkMEC/PJHgxw0xH74yx/3XnaYRJgMB8obxQW6kL9QYEJ0FIFgByfIL7/IQAlvQwEpnAC7DtLNJCKUoO/w45c44GwCXiAFB/OXAATQryUxdN4LfFiwgjCNYg+kYMIEFkCKDs6PKAIJouyGWMS1FSKJOMRB/BoIxYJIUXFUxNwoIkEKPAgCBZSQHQ1A2EWDfDEUVLyADj5AChSIQW6gu10bE/JG2VnCZGfo4R4d0sdQoBAHhPjhIB94v/wRoRKQWGRHgrhGSQJxCS+0pCZbEhAAOw==");
});
DEMO Fiddle
instead writing
var doc = hiddenFrame.contentWindow.document.open("text/html", "replace");
doc.write(htmlDocument);
doc.close();
Use ngBindHtml
$scope.myHtml = $sce.trustAsHtml(data.html);
In the hiddenFrame,add one placeHolder variable {{myHtml}}.
It will Worke.
I want to have one modal, only with content changing. In modal im showing articles via iframe. The problem is that my solution is a bit laggy, and you can see previous article before changing. Im using JS:
function switchTitleMod1(title,id) {
document.getElementById("titleMod1").innerHTML = title;
document.getElementById("iframe").src = "index.php?option=com_content&view=article&id="+id+"&tmpl=component";
}
The modal code:
<div id="informacje" class="uk-modal">
<div class="uk-modal-dialog" >
<a onclick="resetTitleMod1();" class="uk-modal-close uk-close"></a>
<div id="titleMod1" class="uk-modal-header uk-text-bold uk-text-large uk-text-center"><h2>Zapisz si? na kurs</h2></div>
<iframe id="iframe"style="width: 100%;height:650px" scrolling="auto" frameborder="0" src="index.php?option=com_content&view=article&id="34"&tmpl=component" hspace="0">
</iframe>
<div class="uk-modal-caption">Copyright by MRP-KODER</div>
This is how i call the modal:
<a onclick="switchTitleMod1('Szkolenia HACCP','42');" href="#informacje" data-uk-modal="{target:'#informacje',bgclose:false,center:true}" class="uk-button uk-button-medium uk-button-primary"> <i class="uk-icon-info uk-icon-justify"></i>Informacje</a>
My question is: How to create modal via Jquery and only adding deleting DOM. Link to the page: link
Via clicking "Informacje" You will see what the problem is.
I found solution by myself :) I didint use DOM model, but it works fine, for using diffrent modals only by changing button id.
var $jq = jQuery.noConflict();
$jq(document).on('click', '#info', open_info_modal).on('click', '#zapytaj', open_ask_modal);
function open_info_modal(e)
{
var articleId = $jq(e.target).data('id');
var articleTitle = $jq(e.target).data('title');
$jq('#modal').on({
'uk.modal.show':function(){
$jq('#title', $jq(this)).html('<h2>'+articleTitle+'</h2>');
$jq('span', $jq(this)).html('<iframe id="iframe"style="width: 100%;height:650px" scrolling="auto" frameborder="0" src="index.php?option=com_content&view=article&id='+articleId+'&tmpl=component" hspace="0">');
},
'uk.modal.hide':function(){
}
}).trigger('uk.modal.show');
}
function open_ask_modal(e)
{
var articleTitle = $jq(e.target).data('title');
$jq('#modal').on({
'uk.modal.show':function(){
$jq('#title', $jq(this)).html('<h2>'+articleTitle+'</h2>');
$jq('span', $jq(this)).html('<iframe id="iframe2"style="width: 100%;height:600px" scrolling="auto" frameborder="0" src="index.php?option=com_chronoforms5&chronoform=zapytaj-szkolenie&tmpl=component&name1='+articleTitle+'" hspace="0">');
},
enter code here'uk.modal.hide':function(){
}
}).trigger('uk.modal.show');
}
I open new window with help of $window.open command and write html content to the window.
Here is Javascript code:
var test = angular.module('test', []);
test.controller('testController', ['$compile', '$scope','$window', function($compile, $scope, $window) {
$scope.openWindow = function() {
$window.open('', '_blank', 'width=500,height=400').document.write($("#report").html());
};}]);
Here is content that I write to the new window:
<div ng-app="test" id = "report" ng-controller="testController">
<p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>
<p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
<p>Print icon: <span class="glyphicon glyphicon-print"></span></p>
<hr/>
<button ng-click="openWindow()">push!</button>
</div>
And here is working fiddle.
The problem is that I cant see glyphicon icons in new opened window.
Any idea why I cant see glyphicon icons?
There are two errors in your code. First you are not including the css correctly. You should use the href attribute instead of rel attribute to include the css. Second you have to use the integrity key check if you are including bootstrap from outside.
The correct inclusion is this one:
var test = angular.module('test', []);
test.controller('testController', ['$compile', '$scope','$window', function($compile, $scope, $window) {
$scope.openWindow = function() {
var content = $("#report").html();
var html = '<html><head><title>hi</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"></head><body>'+content+'</span></p></body></html>'
$window.open('', '_blank', 'width=500,height=400').document.write(html);
};}]);
And the updated fiddle: http://jsfiddle.net/d8atdw0t/283/
If you wish to make reference to the stylesheet from your project you can load a page template with a query parameter like http://yoursite.com/page.html?window=true, then on $window load you specify the url with query param.
$window.open('http://yoursite.com/page.html?window=true', '_blank', 'width=500,height=400');
Depending how you will load the template file (from backend for example) you can restrict to load the template file if query param exists.
Your link is wrong in the html you push to the new window. Use this instead
<link rel="stylesheet" type="text/css"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
Updated fiddle here
Using AngularJS, Im trying to load the "myLink" URL address to iframe in another html.
data.No is the id that i pull from another place and works fine (get the Id that i need for the url)
in the controller - "TransactionsCtrl":
$scope.myLink = "http://"the real url"+ data.No +"&file="+ data.No +"&contract_id="+ data.No;
console.log($scope.myLink);
in the HTML :
<div ng-controller= "TransactionsCtrl">
<iframe ng-src="{{myLink}}"></iframe>
</div>
and all i get is this :
Error: [$interpolate:interr] Can't interpolate: {{myLink}}
Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy. URL
when i hard coded the url its working fine.
In the controller you should use:
$scope.myLink = $sce.trustAsResourceUrl(myUrl)
It works for me : you can write this in js code as a function
$scope.trustSrc = function(src) {
return $sce.trustAsResourceUrl(src);
}
$scope.iframe = {src:"http://www.youtube.com/embed/Lx7ycjC8qjE"};
and use it in your view :
<iframe ng-src="{{trustSrc(iframe.src)}}"></iframe>
or you can write it as a filter like :
.filter('trusted', function($sce){
return function(url) {
return $sce.trustAsResourceUrl(url);
};
})
and use it in view :
<iframe ng-src="{{iframe.src | trusted}}"></iframe>
I have one button in html template of text! plugin :
<input type="button" id="_print" value="Print">
<iframe name="theFrame"></iframe>
And this is the click event in my view of backbone :
checkOut : function(){
var params = [
'height='+screen.height,
'width='+screen.width,
'fullscreen=yes'
].join(',');
var popup = window.open('urlishere','theFrame', params);
popup.moveTo(0,0);
}
Is it possible to use window.open to open iframe?
Sorry, I didn't see the tag backbone. But if it works for you, here are my 2 cents
For print to work: http://jsfiddle.net/zyGfL/1/
HTML
<input type="button" id="_print" value="Print" onclick="checkout()">
<iframe name="theFrame"></iframe>
JS
function checkout(){
var params = [
'height='+screen.height,
'width='+screen.width,
'fullscreen=yes'
].join(',');
var popup = window.open("http://www.w3schools.com","_blank", params);
}
I am not sure how your Iframe is working currently. But for the print button to work, you have to do something like this.