Change parent frame url if iframe url changes - javascript

I have iframed a page:
<iframe src="http://externalwebsite.com/test.html" scrolling="no" height="400px" width="400px" allowfullscreen></iframe>
And I want to change the parent url to http://mywebsite.com/succes.html if the iframe url changes to http://externalwebsite.com/succes.html
I was trying to figure it out with JavaScript but I didn't manage to do it. Can someone help me?

<iframe id="frameId" src="http://externalwebsite.com/test.html" scrolling="no" height="400px" width="400px" allowfullscreen></iframe>
Bind to the frame.onload event in the parent window.
var frame = document.getElementById('frameId');
frame.onload = function(e){
if(frame.src === 'http://externalwebsite.com/succes.html' ){
window.location.href = 'http://externalwebsite.com/succes.html';
}
};
Try frame.src='someUrl'; for test.

Related

Angular Render html doesn't work

I have this string which arrives from the server side.
<iframe scrolling="no" frameborder="0" allowtransparency="true" height="250" width="300" style="border:0;" src="http://cdn.castplatform.com/scripts/au1324.html?subid=6e6c4c9092a4fd311393cd770c71ff05"></iframe&gt
I want to present the html rendered.
When using $sce.trustAsHtml I get on the view:
<iframe scrolling="no" frameborder="0" allowtransparency="true" height="250" width="300" style="border:0;" src="http://cdn.castplatform.com/scripts/au1324.html?subid=6e6c4c9092a4fd311393cd770c71ff05"></iframe>
I would expect to get the html rendered (see picture) and not just the html stripped from the escape characters (as above):
What am I'm missing here?
Here is the js code:
$scope.field_value = $sce.trustAsHtml($sanitize(field_value));
and the view code:
<div ng-bind-html="field_value"></div>
Thanks.
You need another decoding step (copied from https://stackoverflow.com/a/31290632/3563439):
app.filter('trusted', ['$sce', function($sce) {
var div = document.createElement('div');
return function(text) {
div.innerHTML = text;
return $sce.trustAsHtml(div.textContent);
};
Fiddle: http://jsfiddle.net/masa671/8kphL7xe/

Swapping content of div, on click on image or iframe (Vimeo)

I have some issue:
I have some container, and three elements below this div. Three elements are images or iframe with vimeo embedded movie.
In first case i have :
<div id="media-content">
<iframe src="https://player.vimeo.com/video/1271?api=1" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
And below:
<div class="media-list" id="media-list">
<span> <?php echo $this->Html->image('placeholder/video2.jpg');?> </span>
<span> <?php echo $this->Html->image('placeholder/video3.jpg');?> </span>
<span>
<iframe src="https://player.vimeo.com/video/127561?api=1" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</span>
</div>
And Jquery:
var media = $('#media-list img');
var mediaContainer = $('#media-content');
$(media).on('click',function(e){
var vals = $(this).parent().html();
$(mediaContainer).html(vals);
e.preventDefault();
console.log (e.target);
});
And now what this code does:
On clicking on video2.jog or video3.jpg, iframe in <div id="media-content"> is replaced with this clicked image. And this is ok.
But i want to show vimeo movie <div id="media-content"> on click at iframe inside.
So it's simple content swap, but the problem is, that i don't know how "transfer" vimeo iframe do another div, as clicking on it does nothing.
Thank You for any reply.
PS: To address this question, i send image, it shows 3 red spans and one big green div. CLicking on span should set his attr (in this case img).And this work, problem is,that clicking on vimeo span should open video in green div.enter image description here
When the browser loads/makes ready the DOM then iframe isn't included instantly. For the shake javascript or jquery canot get the inside element of the iframe as DOM haven't it, rather javascript or jquery only get the iframe tag.This is a critical and great problem with jquery & iframe when iframe load thing from different domain/host.
You can also get the iframe element by getting the span with jquery. But for this you have to give the 3rd span a a div and have to click on the div not on the iframe content to get desired solution.
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div id="media-content">
<iframe src="https://player.vimeo.com/video/1271?api=1" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
<div class="media-list" id="media-list">
<span> <?php echo $this->Html->image('placeholder/video2.jpg');?> </span>
<span> <?php echo $this->Html->image('placeholder/video3.jpg');?> </span>
<span >
<div style="border: 1px solid red; z-index:3;width:80px;height:80px;padding:30px;">
<iframe src="https://player.vimeo.com/video/127561?api=1" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</span>
</div>
<script>
$(document).ready(function () {
var media = $('#media-list img');
var mediaContainer = $('#media-content');
$(media).on('click',function(e){
var vals = $(this).parent().html();
$(mediaContainer).html(vals);
e.preventDefault();
console.log (e.target);
});
var media2 = $('#media-list div');
$(media2).on('click',function(e){
var vals = $(this).html();
$(mediaContainer).html(vals).height("70%").width("70%");
e.preventDefault();
console.log (e.target);
});
});
</script>

Storing iframe's id in javascript variable

I was looking for a code like to store iframe's id in javascript's variable inside different divs.
<div id="player">
<iframe id="SAR7KmiCHto" width="560" height="315" src="http://www.youtube.com/embed/SAR7KmiCHto?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>
<div id="player2">
<iframe width="560" height="315" src="//www.youtube.com/embed/9P9JSgZwrjc" frameborder="0" allowfullscreen id="9P9JSgZwrjc"></iframe>
</div>
In above code there are two div ids i.e player and player2. Now I want to store id of iframe from player div in javascript/jquery variable. Need some suggestions.
use jQuery .each() function
var ids = new Array();
$('div[id^=player] iframe').each(function()
{
ids.push($(this).attr('id'));
})
console.log(ids); // output iframe's id array ["SAR7KmiCHto", "9P9JSgZwrjc"]
demo http://jsfiddle.net/L6xsso3t/4/
iframe_ids = $("iframe[id]") will get you a list of iframe elements with id's in jQuery
then you can get the id using iframe_ids[n].id
1) include jquery
2) include this js code
<script>
$(document).ready(function(){
var iframeID1 = $('#player iframe').attr('id');
var iframeID2 = $('#player2 iframe').attr('id');
$('#save_iframeID1').text(iframeID1);
$('#save_iframeID2').text(iframeID2);
});
</script>
in html
<div id="save_iframeID1"></div>
<div id="save_iframeID2"></div>
see
DEMO

Change YouTube iframe src with jQuery

I am trying to change a YouTube video iframe source with jQuery, but looks like running into cross origin issue. My jquery code:
var videourl = $(".videourl").html();
$(".actualyoutube iframe").attr('src',videourl);
iframe gets new src value, but no video is displayed. Any ideas?
extended explanation:
There is a popup div with embeded youtube video
<div class="youtubepopup">
<div class="closeyoutube">X</div>
<div class="actualyoutube">
<iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe>
</div>
</div>
There is a certain td which contains a new src url. There is no other place or way to get this url except from this td.
<td class="videourl">//youtube.com/whatevervideo</td>
And there is a script that should add src on open popup and remove on closing.
var videourl = $(".videourl").html();
$(".youtubecap").click(function() {
$(".actualyoutube iframe").attr('src', videourl);
$(".youtubepopup").fadeIn('slow');
});
$(".closeyoutube").click(function() {
$(".youtubepopup").fadeOut('slow');
$(".actualyoutube iframe").removeAttr('src');
});
$(".youtubepopup").click(function() {
$(".youtubepopup").fadeOut('slow');
});
p.s. now that i laid it out, user3385530 is probably right
You cannot show pages from www.youtube.com inside an iframe. The correct way is to use their video embed codes inside your web page. IFrame embeds are easier, the URL you need to display in an iframe looks like this:
http://www.youtube.com/embed/VIDEO_ID_GOES_HERE
Just place an iframe such as this inside your web page:
<div class="actualyoutube">
<iframe width="560" height="315" src="http://www.youtube.com/embed/VIDEO_ID_GOES_HERE" frameborder="0" allowfullscreen></iframe>
</div>
Finally, assuming you are able to extract video id from the URLs using jQuery, you can use this to display videos*:
var videoid = "S2ISrpNM-0s";
$(".actualyoutube iframe").remove();
$('<iframe width="420" height="315" frameborder="0" allowfullscreen></iframe>')
.attr("src", "http://www.youtube.com/embed/" + videoid)
.appendTo(".actualyoutube");
* Changing the src property of an iframe that is already displaying a YouTube video did not work; I therefore suggest destroy-iframe-recreate-iframe approach.
<div class="service-video-media">
<iframe id="main-play" width="560" height="315" src="https://www.youtube.com/embed/uTcj2v85y34" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="video-list">
<img src="https://img.youtube.com/vi/uTcj2v85y34/1.jpg" video-id="uTcj2v85y34" />
<img src="https://img.youtube.com/vi/jRuR4GaSsBI/1.jpg" video-id="jRuR4GaSsBI" />
<img src="https://img.youtube.com/vi/ec7aQPLSBsU/1.jpg" video-id="ec7aQPLSBsU" />
<img src="https://img.youtube.com/vi/uTcj2v85y34/1.jpg" video-id="uTcj2v85y34" />
<img src="https://img.youtube.com/vi/jRuR4GaSsBI/1.jpg" video-id="jRuR4GaSsBI" />
<img src="https://img.youtube.com/vi/ec7aQPLSBsU/1.jpg" video-id="ec7aQPLSBsU" />
</div>
</div>
<script>
jQuery(document).ready(function(){
jQuery('.video-list img').on('click',function () {
var videoId = jQuery(this).attr('video-id');
var videoUrl = 'https://www.youtube.com/embed/'+videoId;
jQuery('#main-play').attr('src',videoUrl);
});
});
</script>
This will not work because page is parsed and only on refresh with new ulr will happen.
You need to use ajax to pre-load the page with new url and then to set iframe.

height percentage math javascript for iframe

Here's the deal... I have a externaly loaded iframe called "radioiframe" and I have a local iframe with my page content. As you'll notice my src in "radioiframe" is empty, that's because the source is loaded via javascript (code at end). All works just perfectly but the oly problem I have is when I turn display on the iframe comes and pushes my content down, hidding it (overflow:hidden in body to prevent doble scroll bar). Ive been trying to maybe math it out, the height of "radioiframe" is fixed at 34px, but the "content" height is relative to monitor size and page content. Ive tried to calculate with jQuery the height of the frame and then substract the height ou 34 and set it on the iframe, to no avail.
Just to remind that everything is working execpt the setSizes math function.
HTML on frame page.
<div id="radiodiv">
<iframe src="" id="radioiframe" height="34px" width="100%" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" scrolling="no" allowtransparency="true" style="display:none;"></iframe></div>
<div id="contentdiv">
<iframe src="home2.php" id="content" name="content" height="100%" width="100%" frameborder="0" scrolling="auto" marginwidth="0" marginheight="0" vspace="0" hspace="0"></iframe></div>
<script type="text/javascript">
function setSizes() {
var containerHeight = $("#content").height();
document.getElementById('content').height = containerHeight - 34;
}
</script>
Javascript for loading source:
function ShowSaburi (){
parent.document.getElementById('radioiframe').src = 'http://www.saburimusic.com/player.php';
parent.document.getElementById('radioiframe').style.display = 'block';
};
function ShowNero (){
parent.document.getElementById('radioiframe').src = 'http://www.radionero.com/player.php';
parent.document.getElementById('radioiframe').style.display = 'block';
};
function HideRadio (){
parent.document.getElementById('radioiframe').src = '';
parent.document.getElementById('radioiframe').style.display = 'none';
};
How about styling contentdiv with overflow set to scroll
<div id="contentdiv" style="overflow: scroll;">
<iframe src="home2.php" id="content" name="content" height="200px" width="100%" frameborder="0" scrolling="auto" marginwidth="0" marginheight="0" vspace="0" hspace="0"></iframe>
</div>
you can set the height of the div to the max height of the window less 34px for the radioiframe.
Hope this helps.
function ShowSaburi() {
// your methods
// add this
setContentHeight();
}
function setContentHeight() {
var docHeight = $(document).height();
if (docHeight){
var contentHeight = docHeight - 40;
$('#contentdiv').css({'height': contentHeight+ 'px'});
}
}
Just an idea.

Categories

Resources