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>
Related
I want to pass url parameters (hidden fields) to iframe/embedded forms on our Hubspot landing pages.
The url parameters I want to pass to the Typeform are utm_source, email and referralcode.
An example of a page I'm currently working on:
<div class="typeform-widget"
data-url="https://xxxxxx.typeform.com/to/xxxx"
data-transparency="50"
data-hide-headers=true
data-hide-footer=true
style="width: 100%; height: 600px;" > </div>
<script> (function() {
var qs,js,q,s,d=document,
gi=d.getElementById,
ce=d.createElement,
gt=d.getElementsByTagName,
id="typef_orm",
b="https://embed.typeform.com/";
if (!gi.call(d,id)) {
js=ce.call(d,"script");
js.id=id;
js.src=b+"embed.js";
q=gt.call(d,"script")[0];
q.parentNode.insertBefore(js,q)
}
})()
</script>
What code do I need to add to pass the url parameters to my embedded form?
Thanks
This is possible using Typeform Embed API
See a working example on Glitch
You can edit here.
Steps to reproduce:
Include Typeform Embed SDK in your HTML
Extract parameters from URL
let params = new URLSearchParams(location.search);
Reconstruct your form URL
var url = "https://YOUR_SUBDOMAIN.typeform.com/to/YOUR_TYPEFORM_ID"
url += "?utm_source=" + params.get('utm_source');
Display form in a target div
const embedElement = document.querySelector('.target-dom-node')
window.typeformEmbed.makeWidget(
embedElement,
url,
{
hideHeaders: true,
hideFooter: true,
}
)
Hope it helps :)
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,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");
});
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 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);
I'm getting the following data from server <span>text</span>.
I'm using the following function in my controller
$scope.getHtml = function (html) {
return $sce.trustAsHtml(html);
};
and in the html as follows
<div class="col-sm-12 col-md-12" ng-bind-html="getHtml(vm.profileData.htmltext)">
After doing this I am getting this in view, it is not rendering :
<span>text</span>
Please tell me where I'm getting things wrong? Thanks in advance
as i mention you need a html entity decode
$scope.html = angular.element('<div></div>').html('<i>text</i>').text();
$scope.getHtml = function() {
return $sce.trustAsHtml($scope.html);
};
plunker url
I recommend this code for this.
function htmlDecode(str) {
return $('<textarea />').html(str).text();
}
// angular js
$sce.trustAsHtml(htmlDecode(html));
URL redirection is not working i.e
I am using filter for replacing string which match with my anchor tag.
DEMO
Controller
var app = angular.module('app', ['ngSanitize']);
app.filter('parseUrlFilter', function ($sce) {
var urlPattern = /(^|\s)((https?:\/\/)?[\w-]+(\.[\w-]+)+\.?(:\d+)?(\/\S*)?)/gi;
return function (text, target, otherProp) {
text = text.replace(urlPattern, '<a target="' + target + '" href="$&">$&</a>');
return $sce.trustAsHtml(text);
};
});
function Ctrl($scope) {
$scope.text = 'Example text http://example.com http://example.com http://google.com google.com';
}
HTML
<div ng-controller="Ctrl">
<p ng-bind-html="text | parseUrlFilter:'_blank'"></p>
</div>
My problem is when url having http or https then it redirect us correctly to respective page i.e if "http://google.com" it works properly. But if
http or https is missing then it does not work properly i.e if google.com it doesn't redirect to google.com instead it redirect to localhost/folder/google.com.