Jquery append html, not variable name - javascript

I need to append the vidyourl3, but my script keeps adding vidyourl3 name only. Where am I doing a mistake ?
var vidyourl3 = '<iframe id="vide3" width="255" height="195"
src="http://www.youtube.com/embed/Nficz8WZwrk?wmode=opaque" frameborder="0"
allowfullscreen></iframe>';
kacki = 3;
$("#vidgelcekburaya").html("vidyourl"+kacki);

If you have multiple urls then create an object to hold those references as given below
var urls = {
vidyourl3: '<iframe id="vide3" width="255" height="195"
src="http://www.youtube.com/embed/Nficz8WZwrk?wmode=opaque" frameborder="0"
allowfullscreen></iframe>'
}
then use the object key along with bracket notation to access the value
kacki = 3;
$("#vidgelcekburaya").html(urls["vidyourl"+kacki]);

You're putting a literal string in your html. Take the quotes off of your vidyourl and it will work:
$("#vidgelcekburaya").html(vidyourl3 + kacki);
Another problem which is hard to decide what you're trying to do is; your first variable is called vidyourl3, while you then put in vidyourl in your html replace. Which one should it be?

Try:
window.vidyourl3 = '<iframe id="vide3" width="255" height="195"
src="http://www.youtube.com/embed/Nficz8WZwrk?wmode=opaque" frameborder="0"
allowfullscreen></iframe>';
kacki = 3;
$("#vidgelcekburaya").html(window["vidyourl"+kacki]);
If your variable needs to be in the local scope, try
var vidyourl3 = '<iframe id="vide3" width="255" height="195"
src="http://www.youtube.com/embed/Nficz8WZwrk?wmode=opaque" frameborder="0"
allowfullscreen></iframe>';
kacki = 3;
$("#vidgelcekburaya").html(eval("vidyourl"+kacki));
I wouldn't use this method, because eval can be kind of scary.

Related

Find <iframe> width and height

I have an object like this:
object = {
iframe: "<iframe width="560" height="315" src="YouTube link"></iframe>"
}
I need to take the width (in this case 560) and height (in this case 315) value inside this with jQuery/js. Because I need to use this value.
Is that possible?
Thank you.
You can use regex to isolate the two parameters:
var object = {
iframe: '<iframe width="560" height="315" src="YouTube link"></iframe>' // string was invalid before, replaced quotes with apostrophes
}
var regexFound = object.iframe.match(/width="(\d*?)" height="(\d*?)"/);
var asArray = [regexFound[1], regexFound[2]];
var asObject = {width: regexFound[1], height: regexFound[2]}
console.log(asArray, asObject);
Firstly note that the string in the example is invalid due to the repeated use of ". To make the string valid, delimit it with ' and use " to contain the attribute values within it.
As you've tagged the question with jQuery you can use that to build an object from the string instead of parsing it using regex:
let object = {
iframe: '<iframe width="560" height="315" src="YouTube link"></iframe>'
}
let $iframe = $(object.iframe);
console.log($iframe.prop('width'));
console.log($iframe.prop('height'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

How to insert longitude & latitude in iframe in angular js?

Hei
I am using angular and trying to implement iframe in it . I'ave tried many ways to insert longitude and latitude which are coming from database but whenever try to write something like this I get error.
what I tried
<iframe width="100%" height="250" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q={{product.mall.lat}},{{product.mall.long}}&key= key" allowfullscreen></iframe>
I get this error when i tried the above way
[$interpolate:noconcat]
Normal iframe
<iframe width="100%" height="250" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=40.7127837,-74.0059413&key= Akey" allowfullscreen></iframe>
use ng-src instead of src.
you cannot concatenate the URL inside the source attribute for security reasons: you must concatenate the URL in Javascript in a scope variable e.g. fullURL and then ng-src="{{fullURL}}".
if Strict Contextual Escaping (SCE) is enabled ‒ and Angular v1.2 ships with SCE enabled by default ‒ you need to whitelist the URLs.
Reference 1
Angular js scope var value in iframe
Its already been answered in another Question
AngularJS multiple expressions concatenating in interpolation with a URL
More details
Strict Contextual Escaping
This is What My Mentor did
In my controller function where I was getting long & lat He did something like this
$scope.single_product = function (product_id) {
$http.get('url' + product_id + '?expand=product_variants,product_variant_options,photos,shop,mall',
{headers:
{'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': $rootScope.keyword_auth_token}
})
.success(function (data) {
$scope.product = data;
$scope.photo = $scope.product.photos; //Storing photos in phot object
for (var i = 0; i < $scope.photo.length; i++) {
slides.push({path: $scope.photo[i].path, id: currIndex++}); //I already mentioned slides as an array
}
console.log(slides);
console.log($scope.product);
var compile_map = '<iframe width="100%" height="250" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q='+$scope.product.mall.lat+','+$scope.product.mall.long+'&key= AIzaSyCaG_LpOazepPve-DlVH1TuxxkBVseOGd0" allowfullscreen></iframe>';
angular.element($document[0].querySelector('#map_image')).append(compile_map); //This function will run only and load the html if it has long and lat
})
.error(function (data) {
console.log(data);
});
};
and then in html simply that
<div id="map_image"></div>
It works like a charm
Now its work, you need to wrap url into a method, that make it as a trusted url source
in html
<iframe width="100%" height="250" frameborder="0" style="border:0" ng-src='{{getTrustedUrl("https://www.google.com/maps/embed/v1/place?q="+product.mall.lat+","+product.mall.long+"&key=AIzaSyCaG_LpOazepPve-DlVH1TuxxkBVseOGd0")}}' allowfullscreen>
</iframe>
add this function to your controller
$scope.getTrustedUrl = function(src) {
return $sce.trustAsResourceUrl(src);
}

Getting Facebook video ID using jQuery

I've made a script that gets the ID for YouTube and Vimeo, but I am not sure how to get the ID from the Facebook embed URL.
Example embed:
<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FHammers.Serbia.Official%2Fvideos%2F1261009690594307%2F&show_text=0&width=560" width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
I need to get the ID which in this case is: 1261009690594307
How can I it with YouTube? I am new to JS so not sure how to replicate but getting the ID for this one.
$.each($('iframe[src*="youtube.com"]'), function() {
var player = $('<div class="video-player">');
var id = $(this).attr('src');
id = id.substr(id.lastIndexOf("/")+1);
player.attr('data-id', id);
player.html(videoThumbYT(id));
player.on('click', videoIframeYT);
var videoContainer = $('<div class="video-container">');
videoContainer.append(player);
$(this).replaceWith(videoContainer);
});
Fastest using the Regular Expressions.
function fbvideoID(frame) {
var myRegexp = /2F(\d+)%/g;
var match = myRegexp.exec(frame);
return match[1];
}
var facebookVideo = '<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FHammers.Serbia.Official%2Fvideos%2F1261009690594307%2F&show_text=0&width=560" width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>';
document.write(fbvideoID(myString)); //returns ID 1261009690594307
Explanation
Regular Expression
/2F(\d+)%/g
Selects the ID. Test it here!
var match = myRegexp.exec(frame);
Returns array of two elements. Documentation here.
0: "2F1261009690594307%"
1: "1261009690594307"
The 0 index is always the whole expression. The 1 is only the (\d+) - braces. Which contains our ID.
Hope I helped you!
Here's one approach, could be refined a bit.
$.each($('iframe[src*="facebook.com/plugins/video"]'), function() {
var url = decodeURIComponent($(this).attr('src'));
var id = url.match(/\/\d+\//);
if (id) {
id = id.slice(1,-1);
console.log(id);
//do your player stuff here.
}
});

To find the value of src in a string

I have the following string
"<iframe width="420" height="315" src="https://www.youtube.com/embed/DgPO56ImqUA?showinfo=1" frameborder="0" allowfullscreen></iframe>".
how can i get the value of src using javascript.
You can use a regular expression to pull the src from your string like so:
var myString = '<iframe width="420" height="315" src="https://www.youtube.com/embed/DgPO56ImqUA?showinfo=1" frameborder="0" allowfullscreen></iframe>';
var regex = /<iframe.*?src="(.*?)"/;
var src = regex.exec(myString)[1];
console.log(src);
Give a name to your frame such as
"name="frame1" width=..... />"
then use this
alert(document.frames['frame1'].location.href);

jQuery - Get part of a string

In JS/jQuery, I need to strip a YouTube embed code to reveal just the SRC value. How is this possible?
The embed code, for example:
string = "<iframe width="630" height="354" src="https://www.youtube.com/embed/NYjPglsyYZA?rel=0" frameborder="0" allowfullscreen></iframe>"
I am looking to grab everything between src=" and ". I'm thinking maybe a regular expression will do it but not overly sure...
Any suggestions would be great.
try :
var str='<iframe width="630" height="354" src="https://www.youtube.com/embed/NYjPglsyYZA?rel=0" frameborder="0" allowfullscreen></iframe>';
var src = $(str).attr("src");
In jQuery:
$('iframe:first').attr('src');
In plain JavaScript:
document.getElementsByTagName('iframe')[0].src;
UPDATE
Starting with a string, using jQuery:
string = '<iframe width="630" height="354" src="https://www.youtube.com/embed/NYjPglsyYZA?rel=0" frameborder="0" allowfullscreen></iframe>';
var src = $(string).attr('src');
And without jQuery:
string = '<iframe width="630" height="354" src="https://www.youtube.com/embed/NYjPglsyYZA?rel=0" frameborder="0" allowfullscreen></iframe>';
var div = document.createElement('div');
div.innerHTML = string;
var src = div.firstChild.src;
alert(src);
​
http://www.w3schools.com/jsref/jsref_match.asp
Try this
var str='<iframe width="630" height="354" src="https://www.youtube.com/embed/NYjPglsyYZA?rel=0" frameborder="0" allowfullscreen></iframe>';
var n=str.match(/src="(.*)"/);
var result = n.substring(5,n.length()-1);

Categories