Getting the content of #document within an iframe - javascript

I am trying to access the body of the document from an iframe.
I the body I want to get the src value of another iframe.
<iframe src="https://putstream.com/movie/oblivion?watching=RaHP6KwPJ8prB0MfMlhJiYYwW" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" style="height: 820.5px;">
#document
<html lang="en">
<head><style class="vjs-styles-defaults">
</head>
<body>
<iframe id="openloadIframe" allowfullscreen="" webkitallowfullscreen="true" mozallowfullscreen="true" style="width:100%;height:100%;" src="https://openload.co/embed/bbhP94t0548"></iframe>
</body>
</html>
My Attempts:
var oiframe = document.getElementsByTagName('iframe')[1]; //accessing the first iframe
var sif = oiframe.getElementById('openloadIframe').src; //getting the actual content
var ifc = oiframe.contentWindow.getElementById('openloadIframe').src; //at this point I just tried to get it working
var ifhtml = oiframe.contentWindow.document.body.innerHTML.getElementById('openloadIframe').src;
None of these work and I found nothing else how I could access the content of #document.

Related

document.getElementById is null with Lazysizes loaded iframe

I'm trying to get the lazy loaded iframe Id and fail with a TypeError n is null. What am I missing?
$(document).ready(function() {
var widgetIframe = document.getElementById('sclazy');
console.log(widgetIframe);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<iframe id="sclazy" height="500" width="500" frameborder="0" allow="autoplay" class="lazyload" allowfullscreen="" data-src="https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/188612777&auto_play=false&buying=false&sharing=false&download=true&single_active=true&hide_related=true&show_comments=true&show_user=false&show_reposts=false&show_teaser=false&visual=true&show_artwork=true">
</iframe>
Had the same pb, but i did it in two times like this:
var iframeElement = document.querySelector('iframe');
var iframeElementID = iframeElement.id;

auto embed the most recent video from youtube playlist

There was a question about to make an auto embed the most recent video from the channel.
I am trying to make auto embed the most recent video from youtube playlist to webpage.
If a new one would be added on the youtube playlist - it would automatically updates on your webpage.
Here is the code I tried, but it does not update for the latest video, possibly I do something wrong.
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/rI4kdGLaUiQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<script>
var channelID = "UCCTVrRB5KpIiK6V2GGVsR1Q";
$.getJSON('https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fwww.youtube.com%2Ffeeds%2Fvideos.xml%3Fchannel_id%3D'+channelID, function(data) {
var link = data.items[0].link;
var id = link.substr(link.indexOf("=")+1);
$("#youtube_video").attr("src","https://youtube.com/embed/"+id + "?controls=0&showinfo=0&rel=0");
});
</script>
</body>
</html>
Your issue is that you're targetting an element with id youtube_video but have no element with that id. I tested this locally and saw your issue. Also I added some other code that's better (doing this on document ready).
<body>
<iframe id="youtube_video" width="560" height="315" src="https://www.youtube.com/embed/rI4kdGLaUiQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<script type='text/javascript'>
$(document).ready(function() {
var channelID = "UCCTVrRB5KpIiK6V2GGVsR1Q";
$.getJSON('https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fwww.youtube.com%2Ffeeds%2Fvideos.xml%3Fchannel_id%3D'+channelID, function(data) {
var link = data.items[0].link;
var id = link.substr(link.indexOf("=")+1);
$("#youtube_video").attr("src","https://youtube.com/embed/"+id + "?controls=0&showinfo=0&rel=0");
});
})
</script>
fiddle

How to change iframe src

Please bear with me if i'm asking something very basic as I don't know much about coding. I have a stock charting application which has a built-in web browser. I configured this browser to load a html page, which i coded as below, like this mypage.html?symbol=xzy, What i am trying to do here is to capture the submitted html variable, 'symbol' and use its value as part of the url string to load a portion of another third party webpage. I can't figure out what's wrong with my javascript code that is failing to set the value of the 'src' attribute. Any help is most appreciated.
<html>
<header>
<script>
document.getElementById('iframe').src = "http://www.asx.com.au/asx/markets/dividends.do?by=asxCodes&asxCodes="+symbol+"&view=all#dividends";
</script>
</header>
<body>
<div id="dividends"></div>
<iframe id="iframe" src="" style="display:hidden;margin-left: -140px; margin-top: -33px" scrolling="no" frameborder="no" width="398" height="265"></iframe>
</body>
</html>
try move the script after html DOM
<body>
<div id="dividends"></div>
<iframe id="iframe" src="" style="display:hidden;margin-left: -140px; margin-top: -33px" scrolling="no" frameborder="no" width="398" height="265"></iframe>
</body>
<script>
document.getElementById('iframe').src = "http://www.asx.com.au/asx/markets/dividends.do?by=asxCodes&asxCodes="+symbol+"&view=all#dividends";
</script>
A couple of things: 1) start with performing the function onLoad - that way you know the script will run and popluate the src attribute after the browser renders it, and not before.
2) use a function to get the url value.
<html>
<header>
<script>
<!-- source: http://javascriptproductivity.blogspot.com/2013/02/get-url-variables-with-javascript.html -->
function GetUrlValue(VarSearch){
var SearchString = window.location.search.substring(1);
var VariableArray = SearchString.split('&');
for(var i = 0; i < VariableArray.length; i++){
var KeyValuePair = VariableArray[i].split('=');
if(KeyValuePair[0] == VarSearch){
return KeyValuePair[1];
}
}
}
function SetContent(){
var symbol = GetUrlValue('symbol');
document.getElementById('iframe').src = "http://www.asx.com.au/asx/markets/dividends.do?by=asxCodes&asxCodes="+symbol+"&view=all#dividends";
}
</script>
</header>
<body onLoad="SetContent();">
<div id="dividends"></div>
<iframe id="iframe" src="" style="display:hidden;margin-left: -140px; margin-top: -33px" scrolling="no" frameborder="no" width="398" height="265"></iframe>
</body>
</html>
Move the javascript to the bottom of the page AFTER the iframe. You are trying to change an element before it is created. Also do src="about:blank" initially, so it validates.

Print pdf from iframe

I dynamically create a pdf in a iframe:
<iframe name="output" id="output"></iframe>
and try to print from it:
window.frames["output"].focus();
window.frames["output"].print();
But how you can see in this example:
http://jsfiddle.net/FEvq6/78/
It prints a blank site.
It prints blank page because you're printing the iframe itself. Here is what you should do:
1. The iframe should contain EMBED tag which will load the PDF (for some reason stack overflow did not formatted code well, please see paste bin link below):
< embed src="path_to_script_which_generates.pdf" type="application/pdf" id="pdf"
width="100%" height="100%">
< /embed>
2. Then you should call the EMBED object to print the document. But since it may require some time for it to load you would need a timeout:
var doPrinting = (id){
var pdfObject = document.getElementById(id);
if (typeof(pdfObject.print) === 'undefined') {
setTimeout(function(){ doPrinting(id); }, 1000);
} else {
pdfObject.print();
}
}
doPrinting('pdf');
Here is paste bin of the above: http://pastebin.com/s6qSTE8t
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<strike>funny</strike>.
<iframe src="file_to_print.pdf" class="frameSet" type="application/pdf" runat="server" name="I5" scrolling="yes" width="100%" height="400"> </iframe>
</body>
</html>

Loading of an iframe after another

I have two iframes in my web page, and I want to load the second iframe after the first iframe has finished loading. How can I do this? I tried using the settimeout function, but I encountered some problems.
This is my code:
<iframe src="firstiframe" frameborder="0" widht="100%" marginheight="0" marginwidth="0" scrolling="NO" id="the_iframe">
</iframe>
<iframe src="secondframe" frameborder="0" widht="100%" marginheight="0" marginwidth="0" scrolling="NO" id="the_iframe2" >
</iframe>
<script>
function resizeIframe(iframeID)
{
document.setTimeout("resizeIframe",1000);
var iframe = window.parent.document.getElementById(iframeID);
var container = document.getElementById('content');
iframe.style.height = container.offsetHeight + 'px';
}
</script>
You can use the jQuery ready function on the frame to see when it's loaded and then set the src url for the second frame. Something like:
$('#firstframe').ready(function() {
$('#secondframe').attr('src', 'http://yourlink');
});
You can do something like this:
$("#firstIframe").load(function (){
$("#secondIframe").load();
});
I would do this with jquery:
First iframe:
<iframe id="iframe1"></iframe>
<div id="loadsecondIframeHere"></div>
<script>
$('#iframe1').ready(function(){
$('#loadsecondIframeHere').html('<iframe id="iframe2"></iframe');
});
</script>
or use $(document).ready()

Categories

Resources