Sending 2 requests using 1 html page - html

<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>

Related

Put a random number into iframe src URL

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.

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>

Vimeo api play failed because the user didn't interact with the document first

Vimeo player will now play even with allow="autoplay" attribute, check jsfiddle console error, click small icon play button:
https://jsfiddle.net/0vfLtdm8/
var player = document.getElementById('video-player');
var vimeoPlayer = new Vimeo.Player(player);
playbtn.onclick = function() {
vimeoPlayer.play();
}
vimeoPlayer.on('error', function(error) {
console.log(error);
});
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="https://player.vimeo.com/api/player.js"></script>
<div id="video-outer-full">
<div id="video-inner">
<i class="far fa-play-circle" id="playbtn"></i>
<iframe id="video-player" class="video" width="560" height="315" src="https://player.vimeo.com/video/309741585" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="autoplay"></iframe>
</div>
</div>
#Toniq this is an issue specific to jsfiddle and codepen like services.
On those test pages they wrap the user defined test content in an iframe which doesn't have the allow="autoplay" which prevents the play() action from happening.
Also the Vimeo player iframe has to have the allow="autoplay" attribute.
You can see on the api demo page that this problem doesn't occur if you press the custom play button on the top right.
https://player.vimeo.com/api/demo

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

How do I make a audio play onclicked with one thumbnailed image HTML

This is my code so if you can help me it'd be great thank's StackOverflow
<head>
<script>
function play(){
var audio = document.getElementById("audio");
audio.play();
}
</script>
</head>
<body>
<img src="SoundWave.gif" width="200" height="200" value="play" onclick="play();">
<audio id="audio" src="01.mp3"></audio>
</body>
The code you need will be something like this:
<head>
<script>
function play(){
var myAudio = document.getElementById("audio");
if(myAudio.paused)
myAudio.play();
else
myAudio.pause();
}
</script>
</head>
<body>
<img src="SoundWave.gif" width="200" height="200" onclick="play();">
<audio id="audio" src="01.mp3"></audio>
</body>
you can get more information about html5 audio element and how to work with it using this link
P.S. <img> tag does not have a value property