Put a random number into iframe src URL - html

I want a random number behind ?i=
<li>
<strong> Clip</strong> 2<br>
<iframe src="https://mysite.ml/links/clip2.html?i=" height="350" width="600" frameborder="0" scrolling="no" allowfullscreen="true"></iframe>
</li>

First, make sure your iframe has an id attribute, for example:
<iframe id="myrandomiframe" src="" height="350" width="600" frameborder="0" scrolling="no" allowfullscreen="true"></iframe>
Then onpageload, use JavaScript to set the src attribute with Math.random() appended, For example:
document.getElementById("myrandomiframe").setAttribute("src","https://mysite.ml/links/clip2.html?i=" + Math.random());

You'll have to do this when the page loads with JavaScript.
window.addEventListener('load', function(){
document.getElementsByTagName("iframe")[0].src += rando(Number.MAX_SAFE_INTEGER);
console.log(document.getElementsByTagName("iframe")[0].src);
});
<script src="https://randojs.com/1.0.0.js"></script>
<iframe src="example.com/?i="></iframe>
If you need to delve deeper into any of this, I used randojs.com to pick a number between 0 and Number.MAX_SAFE_INTEGER.

Related

iFrames use according to user OS

I want to show one out of two iframe, according to user OS.
if user use iOS it shows one and if androind it show other.
<iframe id="e8e2c112-f7ce-4d21-96e7-59729619a527" src="https://www.vectary.com/viewer/v1/?model=e8e2c112-f7ce-4d21-96e7-59729619a527" frameborder="0" width="50%" height="480"></iframe>
you could detect userAgent in Javascript, like this.
<html>
<body>
<div id="vectary"></div>
<script>
function getOs() {
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
if (/android/i.test(userAgent)) {
//Vectary iframe 1 - for Android
return '<iframe id="e8e2c112-f7ce-4d21-96e7-59729619a527" src="https://www.vectary.com/viewer/v1/?model=e8e2c112-f7ce-4d21-96e7-59729619a527" frameborder="0" width="50%" height="480"></iframe>';
}
// iOS detection from: http://stackoverflow.com/a/9039885/177710
if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
//Vectary iframe 2 - for iOS
return '<iframe id="e8e2c112-f7ce-4d21-96e7-59729619a527" src="https://www.vectary.com/viewer/v1/?model=e8e2c112-f7ce-4d21-96e7-59729619a527" frameborder="0" width="50%" height="480"></iframe>';
}
//Vectary iframe 3 - for all other cases
return '<iframe id="e8e2c112-f7ce-4d21-96e7-59729619a527" src="https://www.vectary.com/viewer/v1/?model=e8e2c112-f7ce-4d21-96e7-59729619a527" frameborder="0" width="50%" height="480"></iframe>';
}
document.getElementById("vectary").innerHTML = getOs();
</script>
</body>
</html>

How to skip scraping with same element with Beautifulsoup4

I want to scrape videos from a web page, but in that page has two's iframe tag..
one for show Facebook page, one the other one is for embed video.
I just want to take the video URL from that..
But when I try to scrape that i got all iframe..
Like this:
url_videos = requests.get(link_to_video)
video_link = BeautifulSoup(url_videos.text, 'html.parser')
video_on_iframe = video_link.find('iframe')
print(video_on_iframe)
and when I try to run the code above I got this result:
<iframe allow="encrypted-media" allowtransparency="true" frameborder="0" height="80" scrolling="no" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FAnimeindoFans%2F&tabs&width=280&height=180&small_header=true&adapt_container_width=true&hide_cover=true&show_facepile=false&appId=123434497681677" style="border:none;overflow:hidden" width="280"></iframe>
<iframe allow="encrypted-media" allowtransparency="true" frameborder="0" height="80" scrolling="no" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FAnimeindoFans%2F&tabs&width=280&height=180&small_header=true&adapt_container_width=true&hide_cover=true&show_facepile=false&appId=123434497681677" style="border:none;overflow:hidden" width="280"></iframe>
<iframe allow="encrypted-media" allowtransparency="true" frameborder="0" height="80" scrolling="no" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FAnimeindoFans%2F&tabs&width=280&height=180&small_header=true&adapt_container_width=true&hide_cover=true&show_facepile=false&appId=123434497681677" style="border:none;overflow:hidden" width="280"></iframe>
<iframe frameborder="0" height="380" scrolling="no" src="http://www.mp4upload.com/embed-q7xxgge1yu1c.html" type="text/html" width="640">
</iframe>
<iframe allow="encrypted-media" allowtransparency="true" frameborder="0" height="80" scrolling="no" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FAnimeindoFans%2F&tabs&width=280&height=180&small_header=true&adapt_container_width=true&hide_cover=true&show_facepile=false&appId=123434497681677" style="border:none;overflow:hidden" width="280"></iframe>
<iframe allow="encrypted-media" allowtransparency="true" frameborder="0" height="80" scrolling="no" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FAnimeindoFans%2F&tabs&width=280&height=180&small_header=true&adapt_container_width=true&hide_cover=true&show_facepile=false&appId=123434497681677" style="border:none;overflow:hidden" width="280"></iframe>
I don't need that Facebook iframe, I just need the video URL from other iframe with attribute height="380" and width="280"
When I try to specify more details in find() method like this:
video_on_iframe = video_link.find('iframe', width=640, height=380)
I got this:
None
None
None
<iframe frameborder="0" height="380" scrolling="no" src="http://www.mp4upload.com/embed-q7xxgge1yu1c.html" type="text/html" width="640">
</iframe>
None
None
An iframe elements and None in the others..
So.. my question is how to just find all iframe', width=640, height=380 value and skip the None result in the others..?
You could also require src attribute to be present:
video_on_iframe = video_link.find('iframe', src=True)
Or, combined with checks for width and height:
video_on_iframe = video_link.find('iframe', src=True, width=640, height=380)
You can use find_all to find all videos with that dimensions and with the src attribute.
video_on_iframe = [video["src"] for video in video_link.find_all('iframe', width=640,
height=380, src=True)]
print(video_on_iframe)
[u'http://www.mp4upload.com/embed-q7xxgge1yu1c.html']
[Finished in 0.2s]
video_on_frame = video_link.find_all('iframe', height = '380')## This means I wanna scrape iframe who has height value 380 . You can also use widht.
link_array = []
for link in video_on_frame: ## Your html has 1 iframe in video_on_frame format.
get_iframe_url = link['src'] ## find iframe's src
try:
link_array.append(get_iframe_url) ## add src into a array
except:
link_array.append('Error')
print(link_array) will show your url what you want

Show YouTube video in Twig from the URL

I'm trying to show Youtube videos in Symfony (in the Twig template). I can't use the iframe method because I need to use the general URL (https://www.youtube.com/watch?v=jUjeps1hxIw&t=671s instead of https://www.youtube.com/embed/jUjeps1hxIw).
I have found examples with the HTML tag but they doesn't work.
Finally I have found a solution. I had to change the url, what is that I didn't want.
<div id="youtube-ficha">
{% for artistYoutube in group.youtube %}
<iframe class="myIframe" width="560" height="315" frameborder="0" allowfullscreen></iframe>
<script type="text/javascript">
var url = "{{ artistYoutube}}";
var id = url.split("?v=")[1]; //sGbxmsDFVnE
var embedlink = "http://www.youtube.com/embed/" + id;
var ytube1 = document.getElementsByClassName("myIframe");
ytube1[{{loop.index0}}].src = embedlink;
</script>
{% endfor %}
</div>
If you don't want to use tag you can use
<object width="420" height="315"
data="https://www.youtube.com/embed/jUjeps1hxIw">
</object>
<embed width="420" height="315"
src="https://www.youtube.com/embed/jUjeps1hxIw">
but you have to give the embed link of your you tube video which you can find by following below steps
play your video on you tube
right click on your video
select copy embed code
past it in notepad and copy that link and use it in above tag

Sending 2 requests using 1 html page

<html>
<head>
<script type = "text/javascript">
function changeone() {
parent.document.getElementByID("frame2").src= "www.MyWebsite.com"
}
</script>
</head>
<body>
<iframe id= "frame1" src= "CustomPageCreated.html" width="300" height="500" frameborder="1" scrolling="auto" onload = changeone() > </iframe>
<iframe id= "frame2" width="300" height="500" frameborder="1" scrolling="auto" > </iframe>
</body>
</html>
The custom page loads in the frame but the www.mywebsite.com does not load in the 2nd frame, Is there anything wrong with the code.
Your DOM probably hasn't fully loaded. In addition to the changes #sroes mentioned, try putting the script tag right before the closing </body> tag. The following works for me.
<iframe id="frame1" style="width:400px;height:400px;" onLoad="loadSite2();"></iframe>
<iframe id="frame2" style="width:400px;height:400px;"></iframe>
<script>
var site1 = 'http://rice.edu',
site2 = 'http://bing.com';
function loadSite2() {
document.getElementById('frame2').src = site2;
}
document.getElementById('frame1').src = site1;
</script>
Try to remove parent. and change document.getElementByID to document.getElementById:
document.getElementById("frame2").src= "http://www.MyWebsite.com"
Edit:
Also make sure you add quotes to the onload attribute:
<iframe id= "frame1" src= "CustomPageCreated.html" width="300" height="500" frameborder="1" scrolling="auto" onload="changeone()"> </iframe>

How to unload iframe until It is displayed

I have deployed many iframes to show and hide for each tab,
<div class="slide" data-slide="1">
<iframe src="url" width="100%" height="100%"></iframe>
</div>
<div class="slide" data-slide="2">
<iframe src="url" width="100%" height="100%"></iframe>
</div>
<div class="slide" data-slide="3">
<iframe src="url" width="100%" height="100%"></iframe>
</div>
this is how its code look likes. although some buttons is not displayed.
there is the buttons matching for each iframe.
every time each buttons is clicked, then, matching iframe will be shown to user.
let's imagine that we have 100 iframes.
browser will load so many iframes. then, the users have to spend a lot of times.
so definetely I want to unload iframes until It is displyed.
how can I do that?
You can dynamically change the "src" attribute of the iframe on button click event.
Something like:
<button data-url="http://google.com">Google</button>
<button data-url="http://yahoo.com">Yahoo!</button>
<button data-url="http://aol.com">Aol.</button>
<iframe id="myFrame" src="http://google.com" width="100%" height="100%"></iframe>
Using jQuery:
$( "button" ).on( "click", function(){
var _url = $( this ).data( "url" );
$( "#myFrame" ).attr( "src", _url );
})
Doing so, you will just need a single frame element opposed to frames equivalent to no of buttons.