javascript inside iframe not working - javascript

I use URL's like: http://example.com/videos/GF60Iuh643I
I'm trying to use javascript inside iframe to embed youtube videos:
<iframe width="560" height="315" src="https://www.youtube.com/embed/<script type="text/javascript">
var segment_str = window.location.pathname;
var segment_array = segment_str.split( '/' );
var last_segment = segment_array.pop();
document.write(last_segment);
</script>" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
It should give src="https://www.youtube.com/embed/GF60Iuh643I"
But instead the javascript remains unexecuted,
any idea how to make this work?
Thank you!

Try this(not tested). You get the iframe by id and then set the src to equal the link + the last segment.
<iframe id="videoframe" width="560" height="315" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<script type="text/javascript">
var segment_str = window.location.pathname;
var segment_array = segment_str.split( '/' );
var last_segment = segment_array.pop();
document.getElementById('videoframe').src = 'https://www.youtube.com/embed/' + last_segment;
</script>

Related

How to get href link from iframe of google map?

I am trying to get href link from google map as shown in screenshot. The link is inside iframe. It gives null/error value from this below code. Google map is embed using jquery.
I tried: `
var a_href = $(this).find('div .google-maps-link a').attr('href');
var hrefs = $('#mapDiv .google-maps-link').find('a').attr('href');
var href = $('.google-maps-link').find('a').attr('href');
var values = $("#mapDiv .google-maps-link a").prop('href');
var value = $("#mapDiv .gm-style .place-card .bottom-actions .google-maps-link
a").attr('href');
`
screenshot
Help me.
Update:
<div class="col-md-6" id="map-location">
<div id="dvmap"></div>
</div>
$(document).ready(function () {
$.ajax({
url: "#Url.Content("~/GMap/GetGMapDataInfo")",
method: "GET",
success: function (result) {
var json = JSON.parse(result.data);
$("#dvmap").html('<iframe name="frame1" scrolling="no" marginheight="0" marginwidth="0" id="gmap_canvas" src="' + json.MapLocation + '" width="520" height="400" frameborder="0"></iframe>');
},
error: function () {
}
});
});
I want to share this location (2880 Broadway)
In View large map which is in anchor tag. I need This href link.
For security reasons, you can not access the url of an iframe served on another domain.

How to create dynamic Uikit modal [Joomla]

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');
}

add javascript variable to url

In short, I want to pass the site url of the user which uses the following code:
<script type='text/javascript'>
var url = document.location.href;
</script>
<iframe src="http://localhost/page.php?site=242333&u=" + url + " scrolling="no" frameborder="no" style="border:none; overflow:hidden;" onload="this.width = this.contentDocument.body.scrollWidth; this.height = this.contentDocument.body.scrollHeight" />
The problem in the following part:
src="http://localhost/page.php?site=242333&u= [" + url + "]
How can I concatenate the JavaScript variable with the url?
you cannot use javascript variable in html code. Just fill the src attr of tag with javascript like for example:
<iframe id="frame" src=""> ... //rest of html
<script type='text/javascript'>
var url = document.location.href;
document.getElementById("frame").src = "http://localhost/page.php?site=242333&u=" + url + ... //rest of src
</script>
HTML
<iframe src="http://localhost/page.php?site=242333&u=" id="iframe"></iframe>
JavaScript (jQuery)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type='text/javascript'>
var url = document.location.href, getIframe = $("#iframe").attr("src");
$("#iframe").attr("src", getIframe + encodeURIComponent(url));
</script>
You can't use a JavaScript variable in your HTML markup like you're trying to do. It just doesn't work. What you can do is set the frame's source in a script that comes right after the iframe in your HTML. So, something like:
<iframe scrolling="no" frameborder="no" style="border:none; overflow:hidden;" onload="this.width = this.contentDocument.body.scrollWidth; this.height = this.contentDocument.body.scrollHeight" id="pageFrame"/>
<script type='text/javascript'>
window.addEventListener('load', function() {
var url = document.location.href;
document.getElementById("pageFrame").src =
"http://localhost/page.php?site=242333&u=" + encodeURIComponent(url);
}
</script>
Note that I added an ID to your iframe so that it could be accessed through document.getElementById() Also, I used the JavaScript encodeURIComponent so that the string in your url variable would be safely encoded for your source URL. This will require a corresponding decode on the server side, and since it looks like you're using PHP, that would be done using the urldecode() function.

Get attribute of embed element and changes values in flashvars Javascript?

How can I get the value of flashvars attribute?
<embed src="http://wl2static.lsl.com/common/flash/as3/MemberApplet026.swf"
id="opera_elb" width="100%"
height="100%"
allowscriptaccess="always"
allowfullscreen="true"
bgcolor="ffe8ef"
quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash"
flashvars="muteaudio=0&ishd=1&ishq=0&twoway=0&proxyip=">
I am using getElementsByTagName to get the element.
var Em = content.document.getElementsByTagName('embed');
And replace values in flashvars
<script>
function myFunction()
{
var Em = content.document.getElementsByTagName('embed');
var str = Em[0].getAttribute('flashvars').innerHTML;
var res = str.replace("muteaudio=0","muteaudio=1");
document.getElementsByTagName("embed").innerHTML=res;
}
</script>
But when I try error: Uncaught ReferenceError: content is not defined
please help me.
Okay so here is a solution (strictly to change the attribute of flashvars!). First I think you have a few syntax errors within your JS. So I modified it and here is the JS:
function myFunction()
{
var Em = document.getElementById('vid');
var str = Em.getAttribute('flashvars');
var contentSpot = document.getElementById("he");
contentSpot.innerHTML = Em.getAttribute('flashvars');
Em.setAttribute('flashvars', 'muteaudio=1')
// contentSpot.innerHTML = Em.getAttribute('flashvars');/* I used this to see if the change occurred.*/
}
window.onload = myFunction();
So contentSpot is a div element I created to observe the change.
the html is here:
<embed id="vid" src="http://wl2static.lsl.com/common/flash/as3/MemberApplet026.swf"
id="opera_elb" width="100%"
height="100%"
allowscriptaccess="always"
allowfullscreen="true"
bgcolor="ffe8ef"
quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash"
flashvars="muteaudio=0&ishd=1&ishq=0&twoway=0&proxyip=">
<div id="he"> Hello</div> <!-- The created div to observe -->
Okay so here is my suggestion:
1)pop in the cleaned up code into a jsfiddle, then observe the content.
2)Then remove the line: contentSpot.innerHTML = Em.getAttribute('flashvars'); above the code: Em.setAttribute('flashvars', 'muteaudio=1').
3) remove comments slashes and then hit ctrl + enter to observe the attribute change.
*really watch your "."/DOM syntax and case sensitivity.
Hope this helps you out!

Get attr src from string using javascript

I have a string
str = '<iframe width="100%" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=vi&geocode=&q=Vimcom+91+b%C3%A0+tri%E1%BB%87u&aq=&sll=15.125395,108.795111&sspn=0.034096,0.038581&ie=UTF8&hq=Vimcom+91+b%C3%A0+tri%E1%BB%87u&hnear=&radius=15000&t=m&ll=21.011605,105.849323&spn=0.048074,0.051498&z=13&output=embed"></iframe><br /><small>Xem Bản đồ cỡ lớn hơn</small>'
How to get attr src using javascript (no-jquery) from str string?
Thank!
try this:
str.match(/.*src="([^"]+).*/)[1]
You can do this:
var str = '<iframe width="100%" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=vi&geocode=&q=Vimcom+91+b%C3%A0+tri%E1%BB%87u&aq=&sll=15.125395,108.795111&sspn=0.034096,0.038581&ie=UTF8&hq=Vimcom+91+b%C3%A0+tri%E1%BB%87u&hnear=&radius=15000&t=m&ll=21.011605,105.849323&spn=0.048074,0.051498&z=13&output=embed"></iframe><br /><small>Xem Bản đồ cỡ lớn hơn</small>';
var div = document.createElement('div');
div.innerHTML = str;
alert(div.childNodes[0].getAttribute('src'));
http://jsfiddle.net/Dogbert/hxjpB/
Make sure the string starts with the <iframe> or the first childNode would be a textNode, and this wouldn't work. (There are more robust ways to do this which would work in those cases too, if you want.)
You may find interesting using regular expressions on your code: http://www.w3schools.com/jsref/jsref_obj_regexp.asp and http://www.w3schools.com/js/js_obj_regexp.asp
This regex should work:
/src="[^\ ]*"/i

Categories

Resources