I created activity.json and I want to call data from json file. So, I made a ngFor loop in another file for getting the each item/data from json.
I thought it could get the location url-link from json file and put it to "<iframe src=" line of html file as a src link.
Following code, that mention about above issue.
[this is html file][1]
<div *ngFor="let seminer of activities">
<!-- <p>dive giriyor 6/6</p> -->
<h6>{{seminer.name}}</h6>
<iframe src="{{seminer.location}}" width="95%" height="225" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
The spesific definition, this expression "{{seminer.location}}" couldn't accept as src link. How can I fix this issue. I mean I want to call each different location from json file.
[this is json file][2]
{
"activities":
[
{
"id":1,
"name":"Akınsoft Robotik Yarışması",
"location":"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d97887.93596631498!2d32.725496907783025!3d39.9414344280414!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xbda608ad56f1f424!2zQWvEsW5zb2Z0IEFua2FyYSBCw7ZsZ2UgTcO8ZMO8cmzDvMSfw7wtIEJpcmV5c2VsIEJpbGnFn2lt!5e0!3m2!1str!2str!4v1623673068413!5m2!1str!2str"
},
{
"id":2,
"name":"Parantez Teknoloji Arge Çalışması",
"location":"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3059.4160712434614!2d32.829206315242146!3d39.932081979424524!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14d34ec5db5faa51%3A0xc30ca1837518daa4!2sParantez%20Teknoloji!5e0!3m2!1str!2str!4v1623673296169!5m2!1str!2str"
},
{
"id":3,
"name":"Tusaş Ionic Mobil Tasarımlama",
"location":"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3049.556596789323!2d32.651176815249194!3d40.15215957939679!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x408276c02c887105%3A0x1c5ec14c2922033f!2zR0FaxLAgw5xOxLBWRVJTxLBURVPEsCBUVVNBxZ4gS0FaQU4gTUVTTEVLIFnDnEtTRUtPS1VMVQ!5e0!3m2!1str!2str!4v1623673780177!5m2!1str!2str"
}
]
}
I guess the html tool don't let to use us a specific variable for routing a URL-link in other file. It has to used link in that place from direct, like this;
src="https://..."
I tried to different way for solving this issue. I tried to reach with different id's of each item. My solution is;
<iframe *ngIf="seminer.id==1" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d97887.93596631498!2d32.725496907783025!3d39.9414344280414!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xbda608ad56f1f424!2zQWvEsW5zb2Z0IEFua2FyYSBCw7ZsZ2UgTcO8ZMO8cmzDvMSfw7wtIEJpcmV5c2VsIEJpbGnFn2lt!5e0!3m2!1str!2str!4v1623673068413!5m2!1str!2str" style="border:0;" allowfullscreen="" loading="lazy" class="center"></iframe>
<iframe *ngIf="seminer.id==2" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3059.4160712434614!2d32.829206315242146!3d39.932081979424524!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14d34ec5db5faa51%3A0xc30ca1837518daa4!2sParantez%20Teknoloji!5e0!3m2!1str!2str!4v1623673296169!5m2!1str!2str" style="border:0;" allowfullscreen="" loading="lazy" class="center"></iframe>
<iframe *ngIf="seminer.id==3" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3049.556596789323!2d32.651176815249194!3d40.15215957939679!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x408276c02c887105%3A0x1c5ec14c2922033f!2zR0FaxLAgw5xOxLBWRVJTxLBURVPEsCBUVVNBxZ4gS0FaQU4gTUVTTEVLIFnDnEtTRUtPS1VMVQ!5e0!3m2!1str!2str!4v1623673780177!5m2!1str!2str" style="border:0;" allowfullscreen="" loading="lazy" class="center"></iframe>
Related
I am using Html Widget to show article content in Flutter andriod app.Content is mixed html tag and contains some video embeded using iframe. Widget display a loading circle for a few seconds and after that nothing shown.
Flutter version 3.3.3
flutter_html: ^3.0.0-alpha.6
Sample Code expected to show in app:
<h3>View more</h3>
<p>This is a sample code for article and video inside artcle body</p>
<div class="h_iframe-aparat_embed_frame"><span style="display: block;padding-top: 57%"></span><iframe src="https://www.aparat.com/video/video/embed/videohash/q0IdU/vt/frame" allowFullScreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe></div>
<p>Click to view more video</p>
Have you try this?
var html = '''
<iframe width="1200" height='710'
src="$videosid" </iframe>
''';
Column(children:[
**HtmlWidget(html)** OR
InAppWebView(
InAppWebViewInitialData(data: '${html}'),
initialUrlRequest: URLRequest(
url: Uri.parse("${videosid}" ?? ''),
),
),
]
)
I have a problem using ng-src inside of an iframe. I need to do this:
<div class="tab-content">
<ul class="nav nav-tabs" ng-repeat="document in issues.Document">
<div class="tab-pane pdf-height col-md-5 padding_0" id="{{document.name}}">
<iframe ng-src="http://192.168.223.110/cat/{{document.directory}}/{{document.name}}.{{document.type}}" height="100%" width="100%"></iframe>
</div>
</ul>
</div>
RESULT:
<iframe ng-src="http://192.168.223.110/cat/{{document.directory}}/{{document.name}}.{{document.type}}" height="100%" width="100%" src="http://192.168.223.110/cat/{{document.directory}}/{{document.name}}.{{document.type}}"></iframe>
I know that the problem is $sce, which is a protection from XSS, and that the link needs to be added to the whitelist... So it is working when I do this.
<ul class="nav nav-tabs" ng-repeat="document in issues.Document">
<div class="tab-pane pdf-height col-md-5 padding_0" id="{{document.name}}">
<iframe ng-src="{{someUrl}}" height="100%" width="100%"></iframe>
</div>
</ul>
And I define inside the controller:
$rootScope.someUrl = $sce.trustAsResourceUrl('http://192.168.223.110/cat/files/incoming/12345_3232ASD_pero.pdf');
But I can't do it like that because I'm looping with ng-repeat, so the link is generated dynamically. It need's to be readable from the database!
You can use a filter instead:
HTML:
<iframe src="{{yourURL | trustAsResourceUrl}}"></iframe>
where 'yourURL' is the URL of the iframe and 'trustAsResourceUrl' is the filter and is defined as in some module(like eg. filters-module) as:
JS:
angular.module('filters-module', [])
.filter('trustAsResourceUrl', ['$sce', function($sce) {
return function(val) {
return $sce.trustAsResourceUrl(val);
};
}])
And you can use this filter in all the iframes and other embedded items in your application.
This filter will take care of all the urls that you need to trust just by adding the filter.
Ok I found what the problem was..
Thank you for that filter it is working now :)
All I needed to do was to create ng-src link this:
<iframe ng-src="{{apiUrl+document.directory + '/' + document.name + '.'+ document.type | trustAsResourceUrl}}"
height="100%" width="100%">
</iframe>
Maybe this helps to someone! :)
As what Kop4lyf said
you need to add filter in js
//Create a filter for trust url
app.filter('trustAsResourceUrl', ['$sce', function($sce) {
return function(val) {
return $sce.trustAsResourceUrl(val);
};
}]);
and output ih html as
ng-src="{{x.title.rendered | trustAsResourceUrl}}"
Some other filter :
//Create a filter for trust html
app.filter('trustAsHtml', ['$sce', function($sce) {
return function(val) {
return $sce.trustAsHtml(val);
};
}]);
I have my HTML:
<amp-list height="400" layout="fixed-height" src="data.json">
<template type="amp-mustache">
<amp-carousel height="200" layout="fixed-height" type="carousel">
<amp-img src="img/{{ imgSrc }}.jpg" layout="fixed" width="100" height="100" alt="{{ productName }}"></amp-img>
</amp-carousel>
</template>
</amp-list>
Which should display a carousel with the product images I've specified within the data.json file. However, if you take a look at my page here, it isn't functioning as I'd expect. I tried removing the dynamic functions and it works as expected, so something with the <amp-list> is confusing it. I followed the issues on the AMP Project GitHub: here, here, and here.
Here's what the component should look like:
https://ampbyexample.com/playground/#url=https%3A%2F%2Fampbyexample.com%2Fcomponents%2Famp-carousel%2Fsource%2F&mode=Responsive
And here's what it looks like currently:
https://www.perfectimprints.com/amp/product/offering-buckets/
Any insights would be much appreciated. Thanks!
They key is to use the amp-list in single-item mode and then manually iterate over the different items:
<amp-list width="325" height="325" layout="fixed" single-item src="/items.json">
<template type="amp-mustache">
<amp-carousel type="slides" layout="fill">
{{#items}}
<amp-img src="{{src}}" layout="fill" alt="{{alt}}"></amp-img>
{{/items}}
</amp-carousel>
</template>
</amp-list>
Another trick is to let the amp-list define the layout and then use the fill layout for carousel and images.
I got some solution for it.
{
items: [
{
values: [
{
category:"cate1",
image_link: "url1",
},
{
category:"cate1",
image_link: "url2",
},
{
category:"cate1",
image_link: "url3",
},
{
category:"cate1",
image_link: "url4",
},
]
}
]
}
above json data format we are getting from api.
if you does not has this format data from api then you have to chage to this format only.
<amp-list id="list_id" width="350" height="150" layout="flex-item"
src="api url">
<template type="amp-mustache">
<amp-carousel width="350" height="150" layout="fixed" type="carousel" autoplay delay="2000"
loop>
{{#values}}
<div role="text">
<amp-img src="{{image_link}}" layout="fixed" width="100" height="100" alt="{{title}}">
</amp-img>
<p class="category_label">{{category}}</p>
</div>
{{/values}}
</amp-carousel>
</template>
</amp-list>
above code for carousel.
it will display like above.
Thanks
Vishal
There is a workaround which you need to try.
amp-list expects an items array or object. For amp-carousel to work with amp-list and amp-mustache, you need to structure your response like this.
{"items": [{
"values": [/*...*/]
In your html code do this,
<amp-list height="400" layout="fixed-height" src="data.json">
<template type="amp-mustache">
<amp-carousel height="400" layout="fixed-height" type="carousel">
{{#values}}
<amp-img src="img/{{imgSrc}}.jpg" layout="fixed" width="100" height="100" alt="{{productName}}"></amp-img>
{{/values}}
</amp-carousel>
</template>
</amp-list>
If your arrows are disappearing, then you need to add controls attribute to amp-carousal.
<amp-carousel height="400" layout="fixed-height" type="carousel" controls>
.
.
</amp-carousel>
I'm trying to implement amp-list to allow a different currency depending on where the user is from. I've implemented the amp-list element and created a JSON file (which is a CORS url), containing the data using the correct syntax.
The amp-list however is not printing the data, and instead printing a blank space. The HTML template is:
<amp-list width="auto"
height="50"
layout="fixed-height"
src="/amp-price/57938">
<template type="amp-mustache">
<p class="price align-center {{test}}">{{price}}</p>
</template>
</amp-list>
And the JSON response is:
{"items": [{"price": "\u00a321.59", "test": "test"}]}
But the rendered HTML is:
<amp-list width="auto" height="50" layout="fixed-height" src="/amp-price/57938" class="i-amphtml-element i-amphtml-layout-fixed-height i-amphtml-layout-size-defined i-amphtml-layout" aria-live="polite" style="height: 50px;">
<template type="amp-mustache">
<p class="price"> - </p>
</template>
<div class="i-amphtml-fill-content i-amphtml-replaced-content" role="list"></div></amp-list>
The JSON response has all the correct AMP headers, and I'm not getting any AMP errors in the console.
I've also followed the src link in the page source and it goes to the correct URL.
Is there something simple I'm missing?
I had the same problem and I tried almost everything. The amp-list in safari 10 doesn't load the json endpoint.
But the solution for me is to add credentials="include" into my amp-list tag:
the final amp-list:
<amp-list credentials="include" id="smallcartsList" width="auto" height="#HeightRequest" [height]="CurrentCartList.items.length == 0 ? 5 : 50 * CurrentCartList.items.length" media="(max-width: 1199px)" layout="fixed-height" binding="no" src="/API/CartList/GetCartsList" [src]="cartlistsource" template="cartlistdetail"> </amp-list>
Sebastian Benz is correct I have use the same code and working fine
Here is working url
HEAD JS
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
BODY HTML
<amp-list width="auto"
height="50"
layout="fixed-height"
src="https://jsonblob.com/api/jsonBlob/1f6f838d-25aa-11e8-8863-d99090d9ec78">
<template type="amp-mustache">
<p class="price align-center {{test}}">{{price}}</p>
</template>
</amp-list>
JSON DATA LINK
I have a working Doxygen ALIAS code using HTML (via #htmlonly), that in order to display a youtube video, allows me to simply write in the (".markdown")-file:
Youtube Link:
https://www.youtube.com/watch?v=**CODE**
With ALIAS:
#youtube{**CODE**}
Without ALIAS:
#htmlonly
<div align="center">
<iframe
title="my title" width="560" height="349"
src="http://www.youtube.com/embed/**CODE**?rel=0&loop=1"
frameborder="0" allowfullscreen align="middle">
</iframe>
</div>
#endhtmlonly
By adding the following ALIAS to the Doxyfile:
ALIASES += youtube{1}="#htmlonly<div align='center'><iframe title='my title' width='560' height='349' src='http://www.youtube.com/embed/\1?rel=0&loop=1' frameborder='0' allowfullscreen align='middle'></iframe></div>#endhtmlonly"
My problem is that the macro as you can see from above is HUGE and looks really CONFUSING!
Questions:
Is there a way to make it look clean?
What should I do with bigger HTML raw codes?
Should I be using any other Doxygen alternative to the ALIAS?
I managed to figure it out.
Instead of:
ALIASES += youtube{1}="#htmlonly<div align='center'><iframe title='my title' width='560' height='349' src='http://www.youtube.com/embed/\1?rel=0&loop=1' frameborder='0' allowfullscreen align='middle'></iframe></div>#endhtmlonly"
I can use:
#youtube{link}, with:
ALIASES+=addyoutube{1}="#htmlonly</p><div class='addYoutube'>\1</div>#endhtmlonly"
ALIASES+=youtube{1}="#addyoutube{\1} #htmlinclude add_youtube.html"
EXAMPLE_PATH += #CMAKE_CURRENT_SOURCE_DIR#/add_youtube.html
And add the following javascript code in a file in the current directory, add_youtube.html:
<script type="text/javascript">
var $getDiv = $('div.addYoutube').last();
var filmId = $getDiv.html()
filmId = filmId.replace("https://","")
filmId = filmId.replace("www.","")
filmId = filmId.replace("youtube.com/watch?v=","")
document.write("<div align='center'><iframe title='my title' width='560' height='349' src='http://www.youtube.com/embed/"+filmId+"?rel=0&loop=1' frameborder='0' allowfullscreen align='middle'> </iframe> </div>");
$getDiv.remove()
</script>
A bit to late for a party, but in Doxygen 1.8.12 it is possible to create some combination of doxygen tags #brief and HTML elements.
When you defining attributes for HTML elements it is possible to use apostrophes class='someClass' or you can also use quote sign with a backslash class=\"someClass\".
To indent the html use the string concantenation with a backslash sign \.
ALIASES += "briefWithImage{3} = #brief \
#htmlonly \
<span><img class='imgBriefImage' src='\1' alt='\1'></span> \
</span><span class='spanBriefText'>\2(<b>\3</b>)</span> \
#endhtmlonly"
I'm not sure about alternatives to aliases. One way is to define your custom HTML header for each page and when page is loaded - replace your own placeholders using custom JS functions.