I want to call a function in my index page which is available at "phone gap file", I have called my index page inside phone gap file with in a frame.
Current code working in web but not in application,Please any one suggest me
//code inside phonegap
function clickImage(){
alert("Phonegap app");
}
//Code inside normal html
function clickPicture(){
window.parent.clickImage();
}
index.html
_______________
<body>
<button onclick="clickPicture();">Take Picture</button>
</body>
Phonegap.html
_____________
<iframe id ="Qusframe" src="index.html" width='100%' scrolling='no' frameBorder='0' >
<p> Your browser does not support iframes. </p>
</iframe>
Related
I am new to HTML and i don't know JavaScript.I want embed a badge to my website using iframe tag <iframe src="URL" width="500" height="50" frameborder='0' align='middle'> and when some one clicks on it,i want to open a website in a new tab.
I tried adding <a> tag around frame tag but only the borders of frame are hyper linked not the badge . how do I link the badge embedded in an frame to a new site?
Working Answer :
NOTE : Onclick will take you to go to google.com in new tab. This You can click only once. The Listener resets on refreshing the main page again.
<script type="text/javascript">
focus();
var listener = window.addEventListener('blur', function() {
if (document.activeElement === document.getElementById('myFrame')) {
var win = window.open('https://www.google.com', '_blank');
win.focus();
}
window.removeEventListener('blur', listener);
});
</script>
<iframe id="myFrame" src="https://www.codewars.com/users/balajis/badges/large" width="500" height="50" align='middle' frameborder='0'">
Add your Badge as a image.
<a href="NEW_SITE_URL" target="_blank">
<img width="220" height="250" border="0" align="center" src="BADGE_URL"/>
</a>
I am trying to develop a program that will switch between url locations every 10 seconds and then loop back after going to the last url. Description below:
Display url1 for 10 sec
Display url2 for 10 sec
Display url3 for 10 sec
LOOP BACK TO URL (continuous loop)
I believe this can be done using settimeout and for loop. I do not have a complete understanding of settimeout and java for that matter so that is where I am currently stuck at. I have placed a code below but since I do not know how to use settimeout believe this is my first mistake.
If there is a better way to do this I am all ears. I have been trying java for 3 days because it needed to be do for a project at work so I am brand new to it and probably over my head.
<!DOCTYPE>
<html>
<body>
"urls"
<script>
var myurl;
function urls()
{
myurl=setTimeout(url1,0);
myurl=setTimeout(url2,10000);
myurl=setTimeout(url3,20000);
}
function url1()
{
<embed width="100%" height="100%" name=plugin src="http://files.asme.org/ICOMES/News/15876.pdf#pagemode=none&scrollbar=0&page=2" type="application/pdf".;
}
function url2()
{
<embed width="100%" height="100%" name=plugin src="http://www.tbp.org/pubs/Features/Su04McMasters.pdf#pagemode=none&scrollbar=0&page=2" type="application/pdf".;
}
function url3()
{
<embed width="100%" height="100%" name=plugin src="http://milproj.dc.umich.edu/publications/EngFlex_report/download/EngFlex%20Report.pdf#pagemode=none&scrollbar=0&page=2" type="application/pdf".;
}
</script>
</body>
</html>
edit:
<!DOCTYPE>
<html>
<body>
<script>
var urlList = ['http://www.google.com', 'http://www.msn.com', 'http://www.yahoo.com'];
var wnd;
var curIndex = 0; // a var to hold the current index of the current url
function openWindow(){
wnd = window.open(urlList[curIndex], '', '');
setTimeout(function () {
wnd.close(); //close current window
curIndex++; //increment the index
if(curIndex < urlList.length) openWindow(); //open the next window if the array isn't at the end
}, 2000);
}
openWindow();
</script>
</body>
</html>
It's not java. It's javascript ;)
You can do one iframe in an HTML and use javascript to change it's source every 10 seconds.
For example:
<html>
<body>
<iframe id="theIframe" src="">
</iframe>
</body>
<script>
function timeout() {
setTimeout(function () {
document.getElementById("theIframe").src= 'http://www.google.com';
timeout();
}, 10000);
}
timeout();
</script>
<html>
I am not sure this exact code will work because I just wrote it without test. But you can get the general idea. Like this every 10 seconds it will reload google. You can modify it so the websites are taken from an array or something.
Not all browsers will support opening the PDF directly in browser though. Some might want to download it - depending on plugins. If you want to render the PDF it might require external libraries.
I include the YouTube player as follows in my php file but the player does not show the fullscreen button. Switching to the flash player works (whether through changing the url from /embed to /v or by disabling &html5=1). What am I doing wrong?
An example is available here: http://jonnyrimkus.square7.ch/stuff/youtube_html5_fullscreen.php
<script>
var tag = document.createElement(\'script\');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName(\'script\')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady() {
player = new YT.Player(\'player\', {
playerVars: {
\'allowfullscreen\': \'true\',
\'allowscriptaccess\': \'always\'
},
events: {
\'onReady\': onYouTubePlayerReady,
\'onStateChange\': playerStateChange,
\'onError\': playerStateError
}
});
}
</script>
<iframe id="player" width="425" height="356" border="0" frameborder="0" src="http://www.youtube.com/embed/36XdO9Iv9ew?enablejsapi=1&playerapiid=lastfmplayer&autoplay=1&html5=1&fs=1&origin=http://jonnyrimkus.square7.ch"></iframe>
The fullscreen button will also not be visible if the Youtube player is inside another iframe that does not have allowfullscreen attribute.
Unlike what Google's documentation says(as of 11/2014), the fs attribute in querystring does not seem to influence the visibility of fullscreen. The visibility seems to be influenced by allowfullscreen attribute in iframe which youtube player puts by default during instantiation. That said, if your embed the player inside another iframe you should also mark that iframe for allowfullscreen ( or all its variants webkitallowfullscreen mozallowfullscreen)
<iframe src='' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen>
<!-- YT player-->
</iframe>
The way you are using the iframe api now does nothing, the api is made to bind on an empty element, like <div id="player"></div>, the id is the first argument in the new YT.Player function.
In order to load a youtube video with the iframe api you need this in the body:
<div id="player"></div>
<script type="text/javascript">
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: 480,
width: 640,
videoId: "36XdO9Iv9ew",
});
}
</script>
There is no need to explicitely specify you want to enable fullscreen when using the iframe api.
You can also just use the iframe without the api, you'll need to specify you want fullscreen when you use it.
<iframe width="640" height="480" frameborder="0" id="player" allowfullscreen="1" title="YouTube video player" src="http://www.youtube.com/embed/36XdO9Iv9ew?enablejsapi=1"></iframe>
Just using the iframe tag is a bit faster, but if you want to use the extra features of the iframe api you have no choice.
A page with examples (also check the source): http://qnet.co/yt
You can also implement the fullscreen feature yourself (not needed for Youtube, but still cool):
var goFullscreen = function(id) {
var el = document.getElementById(id);
if (el.requestFullScreen) {
el.requestFullScreen();
} else if (el.mozRequestFullScreen) {
el.mozRequestFullScreen();
} else if (el.webkitRequestFullScreen) {
el.webkitRequestFullScreen();
}
}
var leaveFullscreen = function() {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
and to make the Youtube player go fullscreen with: goFullscreen('player'), and leave fullscreen with: leaveFullscreen()
The different versions of requestFullscreen and cancelFullscreen are for different browsers, because the standard is not yet completely finished
More info on Javascript Fullscreen: http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/ (relative old document, but still valid)
off-topic: It is useless to echo such a string with php, you can just paste it in the body the file outside of the php tags.
This is still an issue in July 2014, and you just wonder if Google will ever fix this. Actually you can force the Flash player in another way at the client end by using a UA Spoofer, and for Google Chrome browser for instance, Chrome Web Store - djflhoibgkdhkhhcedjiklpkjnoahfmg and then spoof a browser that doesn't understand HTML5.
Actually HTML5 video is still a disaster, and the grainey spikey-jaggy edges to the video and the herringbone patterning though faint is still distracting. Whereas Flash is Smooth, Flawless, Reliable, and Sharp edges with zero patterning artifacts.
HTML5 - still big thumbs down, I wouldn't inflict it on users.
Oh yes and still Fullscreen not appear in embeds like this
Rick Astley - Never Gonna Give You Up # viewpure embed
http://viewpure.com/dQw4w9WgXcQ
You can use the above example to fiddle and diddle with different browser plugins.
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.
I need to make a parent iFrame on domain A go fullscreen from its postMessage event handler which gets triggered by a postMessage from the window in domain B. I have the postMessage communication setup perfectly. The "allowfullscreen" attribute is set on the iframe too. But the requestFullScreen() method seems to silently quit. After searching I found that due to security reasons, requestFullScreen works only on event handlers for events like mouse clicks,
keypress etc. I tried forcefully executing a click on the iFrame using jquery click() and it comes into the click handler too but the requestFullScreen doesn't work. I tried clicking on the iFrame directly and it goes fullscreen.
How do I make this work?
Here's my code - for the parent on domainA.
I have made sure that the post message handler is executed when my child on domain B posts a message
<!DOCTYPE HTML>
<html>
<script type="text/javascript" src="jquery.js"></script>
<script>
var container;
$(function(){
container = $('#parentFrame')[0];
container.addEventListener("click",goFullScreen);
window.addEventListener("message", receiveMessage, false);
});
function receiveMessage(event)
{
/* Use this code to restrict request from only one particular domain & Port!
Port not needed in this case*/
if (event.origin !== "http://myChildDomain.com")
{
return;
}
/*Retrieving relevant variables*/
var message=event.data;
var source=event.source;
var origin=event.origin;
//Forcefully generating a click event because fullscreen won't work when directly requested!
container.click();
}
goFullScreen = function (){
if (container.mozRequestFullScreen) {
// This is how to go into fullscren mode in Firefox
// Note the "moz" prefix, which is short for Mozilla.
container.mozRequestFullScreen();
} else if (container.webkitRequestFullScreen) {
// This is how to go into fullscreen mode in Chrome and Safari
// Both of those browsers are based on the Webkit project, hence the same prefix.
container.webkitRequestFullScreen();
}
}
</script>
<body>
<iframe id="parentFrame" src="http://myChildDomain/child.html" width="804" height="600" frameborder="0" scrolling="no" allowfullscreen style="border: 5px solid #00ff00">
</iframe>
</body>
</html>