I'm trying to display in a WebView several html files in one html using iframes
I'm using the following script in the html file in order to resize the height of iframes in the current html.
<body onload="resizeFrames()" link="#bb7722" vlink="#bb7722" alink="#bb7722" >
<script type="text/javascript">
// Firefox worked fine. Internet Explorer shows scrollbar because of frameborder
function resizeFrames() {
var all_IFrames = document.getElementsByTagName('iframe');
i = 0;
while (frame = all_IFrames.item(i++)) {
resizeFrame(frame);
}
}
function resizeFrame(f) {
f.style.height = f.contentWindow.document.body.scrollHeight + "px";
}
</script>
<iframe width="100%" scrolling="no" frameborder=0 border=0 src="b.html"></iframe>
<iframe width="100%" scrolling="no" frameborder=0 border=0 src="c.html"></iframe>
In order the javascript to work I use the foloowing code:
WebSettings webSettings = wb.getSettings();
webSettings.setJavaScriptEnabled(true);
I load the html file like this:
webView.loadUrl("file:///android_asset/a.html");
The problem is that the size of the resized iframes is sometimes too big and somtimes too small.
I tested it on galaxy s with android 2.2 and all the frames were smaller (cut off in the end) and in an other device with android 4.0.4, all the frames were bigger (adding empty space)
If I remove the webSettings.setJavaScriptEnabled(true); the problem in galaxy s disappears, but in the second device, the frames don't resize at all
full html code:
<!DOCTYPE html>
<html>
<head>
<style>
body{
color: #aa6611;
font-size:20px;
}
.link {
font-weight: bold;
color: #bb7722;
}
</style>
</head>
<body onload="resizeFrames()" link="#bb7722" vlink="#bb7722" alink="#bb7722" >
<script type="text/javascript">
// Firefox worked fine. Internet Explorer shows scrollbar because of frameborder
function resizeFrames() {
var all_IFrames = document.getElementsByTagName('iframe');
i = 0;
while (frame = all_IFrames.item(i++)) {
resizeFrame(frame);
}
}
function resizeFrame(f) {
f.style.height = f.contentWindow.document.body.scrollHeight + "px";
}
</script>
<a name="top"></a>
<font size = "6" color="#ffaa55">Guide</font>
<br />
<br />
<a href="#mainscreen" class="link" >Main screen</a> <br />
Inventory <br />
Store <br />
Market <br />
Creature Attack Dialog <br />
User Attack Dialog <br />
Mini Attack Dialog <br />
Profile <br />
Creature info <br />
User info <br />
Item info <br />
Last Attackers <br />
Achievements History <br />
Achievement info <br />
Options <br />
<br />
<p>
<a name="mainscreen"></a>
<iframe width="100%" scrolling="no" frameborder=0 border=0 src="mainscreen.html"></iframe>
</p>
Back <br />
<p>
<a name="inventory"></a>
<iframe width="100%" scrolling="no" frameborder=0 border=0 src="inventory.html"></iframe>
</p>
Back <br />
<p>
<a name="store"></a>
<iframe width="100%" scrolling="no" frameborder=0 border=0 src="store.html"></iframe>
</p>
Back <br />
<p>
<a name="market"></a>
<iframe width="100%" scrolling="no" frameborder=0 border=0 src="market.html"></iframe>
</p>
Back <br />
<p>
<a name="creatureattackdialog"></a>
<iframe width="100%" scrolling="no" frameborder=0 border=0 src="attackDialogCreature.html"></iframe>
</p>
Back <br />
<p>
<a name="userattackdialog"></a>
<iframe width="100%" scrolling="no" frameborder=0 border=0 src="attackDialogUser.html"></iframe>
</p>
Back <br />
<p>
<a name="miniattackdialog"></a>
<iframe width="100%" scrolling="no" frameborder=0 border=0 src="miniattackdialog.html"></iframe>
</p>
Back <br />
<p>
<a name="profile"></a>
<iframe width="100%" scrolling="no" frameborder=0 border=0 src="profile.html"></iframe>
</p>
Back <br />
<p>
<a name="creatureinfo"></a>
<iframe width="100%" scrolling="no" frameborder=0 border=0 src="creatureInfo.html"></iframe>
</p>
Back <br />
<p>
<a name="userinfo"></a>
<iframe width="100%" scrolling="no" frameborder=0 border=0 src="userInfo.html"></iframe>
</p>
Back <br />
<p>
<a name="iteminfo"></a>
<iframe width="100%" scrolling="no" frameborder=0 border=0 src="itemInfo.html"></iframe>
</p>
Back <br />
<p>
<a name="lastattackers"></a>
<iframe width="100%" scrolling="no" frameborder=0 border=0 src="lastattackers.html"></iframe>
</p>
Back <br />
<p>
<a name="achievementshistory"></a>
<iframe width="100%" scrolling="no" frameborder=0 border=0 src="acheivementhistory.html"></iframe>
</p>
Back <br />
<p>
<a name="achievementsDialog"></a>
<iframe width="100%" scrolling="no" frameborder=0 border=0 src="acheivementDialog.html"></iframe>
</p>
Back <br />
<p>
<a name="options"></a>
<iframe width="100%" scrolling="no" frameborder=0 border=0 src="optionsDialog.html"></iframe>
</p>
Back <br />
</body>
</html>
You need set listeners for the onload handlers in iframe tags, one for each and resize each one when the iframe not the body was loaded.
var iframe = document.getElementById('yourIF');
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
iframe.style.height = (iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight) + "px";
Related
We have A Framed Application. In one of the process, when the page is submitted, we show a busy image until the response is received as the process might take 1+ minute.
In IE11, the Application keeps on loading and never shows the result. But it works fine in Chrome, Firefox and IE Compatibility mode. Please see below for the code.
var myTop = form_input();
if (typeof isaTop == 'function' && isaTop().header) {
isaTop().header.busy(parent.form_input)
}
myTop.location.href = request;
function busy(frameObject) {
try {
with(frameObject.document){
// get all the stylesheets from the header
var allStylesheets = this.window.document.styleSheets;
writeln("<html><head>");
// add the css sheets
for(var i = 0; i < allStylesheets.length; i++) {
writeln('<link type="text/css" rel="stylesheet" href="' + allStylesheets[i].href + '" />\n');
}
// add the rest
writeln("</head>\n<body><div id='busy'>\n" +
"<img src='<%=WebUtil.getMimeURL(pageContext, "b2b/mimes/images/busy.gif") %>' alt='<isa:UCtranslate key="b2b.busy.message"/>' />" +
"<p><isa:UCtranslate key="b2b.busy.message"/></p>" +
"</div></body></html>");
}
frameObject.document.close();
}
catch (e) {}
}
<frameset cols="*,15,0" id="fourthFS" border="0" frameborder="0" framespacing="0">
<!--End of edit by Arshid to hide the history frame from startup of application-->
<frameset rows="0,*" id="workFS" border="0" frameborder="0" framespacing="0">
<frame name="documents" src="<isa:webappsURL name="/b2b/updateworkareanav.do" />" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" />
<frame name="form_input" src="<isa:webappsURL name="/b2b/updatedocumentview.do?refresh=1" />" frameborder="0" scrolling="auto" marginwidth="0" marginheight="0" title="<isa:translate key="b2b.frame.jsp.forminput"/>" />
</frameset>
<frame name="closer_history" src="<isa:webappsURL name="/b2b/closer_history.jsp" />" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" title="<isa:translate key="b2b.frame.jsp.closerhistory"/>" />
<frame name="_history" src="<isa:webappsURL name="/b2b/history/updatehistory.do" />" frameborder="0" scrolling="auto" marginwidth="0" marginheight="0" title="<isa:translate key="b2b.frame.jsp.history"/>" />
<noframes>
<p> </p>
</noframes>
</frameset>
We tried enabling IE Compatibilty mode by putting following code but we are not able to fix the issue.
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
Can some one please give us any clues or help?
Thanks,
Srinivas
enter code here
My problem is exactly like this post
How to stop music when embedded youtube video starts?
But it doesn't solve my problem.
My html for music :
<audio id="myAudio" autoplay>
<source src="music/Morning-Sun.wav">
</audio>
embed video :
<div class="video">
<div onclick="thevid=document.getElementById('thevideo');
thevid.style.display='block'; this.style.display='none';
document.getElementById('iframe').src =
document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');">
<img style="cursor: pointer;" src="images/video-thumb-2.jpg" alt="Walk Through" />
</div>
<div id="thevideo" style="display: none; width:100%;">
<div class="embed-container">
<iframe id="iframe" width="900" height="506" src="https://www.youtube.com/embed/i5e03Re96wY?rel=0&vq=hd720&color=white&autoplay=0&wmode=transparent&theme=dark;controls=0&showinfo=0"frameborder="0" allowscriptaccess="always" allowfullscreen="true"></iframe>
</div>
</div>
</div>
[edit]
<div class="video">
<div onclick="thevid=document.getElementById('thevideo');
thevid.style.display='block'; this.style.display='none';
document.getElementById('iframe').src =
document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');
var aud = document.getElementById('myAudio'); aud.pause();">
<img style="cursor: pointer;" src="images/video-thumb-2.jpg" alt="Walk Through" />
</div>
<div id="thevideo" style="display: none; width:100%;">
<div class="embed-container">
<iframe id="iframe" width="900" height="506" src="https://www.youtube.com/embed/i5e03Re96wY?rel=0&vq=hd720&color=white&autoplay=0&wmode=transparent&theme=dark;controls=0&showinfo=0"frameborder="0" allowscriptaccess="always" allowfullscreen="true"></iframe>
</div>
</div>
</div>
First of all, (aside from boohiss for having background music), you are better off to create a function rather than include a string of javascript in your html. You made the error of not defining 'thevid' as a variable, which i corrected. You weren't calling the audio at any point either to stop it, so i created a variable to find it by id, and pause it on video play.
Naturally my sound is different, and as it is short i have set it to loop, but you can easily amend this.
Hope this helps you out :)
var thevid=document.getElementById('thevideo');
var thumb=document.getElementById('thumb');
var playing = 1;
function playvid(){
thevid.style.display='block';
thumb.style.display='none'; document.getElementById('iframe').src =
document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');
var aud = document.getElementById('myAudio');
aud.pause();
playing = 0;
thevid.onended = function(){
aud.play();
};
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<audio id="myAudio" autoplay loop>
<source src="http://www.rachelgallen.com/monkey.mp3">
</audio>
<div class="video">
<div id="thumb">
<img style="cursor: pointer;" src="images/video-thumb-2.jpg" alt="Walk Through" onclick='playvid();' />
</div>
<div id="thevideo" style="display: none; width:100%;">
<div class="embed-container">
<iframe id="iframe" width="900" height="506" src="https://www.youtube.com/embed/i5e03Re96wY?rel=0&vq=hd720&color=white&autoplay=0&wmode=transparent&theme=dark;controls=0&showinfo=0"frameborder="0" allowscriptaccess="always" allowfullscreen="true"></iframe>
</div>
</div>
</div>
</body>
</html>
When my checkboxes are checked, they don't hide their respective videos. What am I doing wrong?
My code
<html>
<head>
<script type="text/javascript">
function hide1() {
document.getElementById('vid1').style.visibility='hidden';
document.getElementById('vid1').style.display='none';
}
function show1() {
document.getElementById('vid1').style.visibility='visible';
document.getElementById('vid1').style.display='block';
}
</script>
</head>
<body>
<iframe width="560" height="315" id="vid1" src="https://www.youtube.com/embed/2Tvy_Pbe5NA" frameborder="0" allowfullscreen> </iframe>
<p>
Hide Video <input type="checkbox" onclick="hide1()" /> |
Show Video <input type="checkbox" onclick="show1()" /></p>
</body>
</html>
The problem was simply a lack of brackets to end some of my original functions.
I'm trying to write a script in Greasemonkey that will generate link's in a frame, but with my limited Javascript knowledge I don't really know how to do this.
Example of subject:
<html>
<head>
<frameset border="0" frameborder="no" framespacing="0" cols="*,280" rows="*">
<frameset border="0" frameborder="NO" framespacing="0" cols="*" rows="*,200">
<frameset border="0" frameborder="NO" framespacing="0" cols="*" rows="75,*">
<frame scrolling="NO" name="bannerFrame" src="banner.php">
<frame scrolling="auto" name="mainFrame" src="main.php">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<body class="framemainbg" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">
<table class="areadescription" cellspacing="0" cellpadding="0" border="0">
<br>
<table>
<tbody>
<tr>
<td>
<p class="personlistcaption">Text:</p>
<p class="listusersrow">
<table>
<tbody>
<tr>
<td valign="top">
<td valign="top">
<b>Text </b>
Text -
Attack
-
<a class="fastattack" onclick="this.href += '&yscroll=' + window.pageYOffset;" href="fight.php?action=attacknpc&checkid=8409099&act_npc_id=764">Quickattack</a>
<br>
Text
</td>
</tr>
</tbody>
</table>
</p>
</td>
</tr>
</tbody>
</table>
<br>
<table>
<form name="formular">
</body>
</html>
</frame>
</frameset>
<frameset border="0" frameborder="NO" framespacing="0" cols="*" rows="*,0">
</frameset>
<frameset border="0" frameborder="NO" framespacing="0" cols="*" rows="*,360">
</frameset>
<noframes><body> Text </body></noframes>
</html>
Example of desired Output :
<html>
<head>
<frameset border="0" frameborder="no" framespacing="0" cols="*,280" rows="*">
<frameset border="0" frameborder="NO" framespacing="0" cols="*" rows="*,200">
<frameset border="0" frameborder="NO" framespacing="0" cols="*" rows="75,*">
<frame scrolling="NO" name="bannerFrame" src="banner.php">
<frame scrolling="auto" name="mainFrame" src="main.php">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<body class="framemainbg" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">
<table class="areadescription" cellspacing="0" cellpadding="0" border="0">
<br>
<table>
<tbody>
<tr>
<td>
<p class="personlistcaption">Text:</p>
<p class="listusersrow">
<table>
<tbody>
<tr>
<td valign="top">
<td valign="top">
<b>Text </b>
Text -
Attack
-
<a class="fastattack" onclick="this.href += '&yscroll=' + window.pageYOffset;" href="fight.php?action=attacknpc&checkid=8409099act_npc_id=764">Quickattack</a>
-
Hit
-
Chase
<br>
Text
</td>
</tr>
</tbody>
</table>
</p>
</td>
</tr>
</tbody>
</table>
<br>
<table>
<form name="formular">
</body>
</html>
</frame>
</frameset>
<frameset border="0" frameborder="NO" framespacing="0" cols="*" rows="*,0">
</frameset>
<frameset border="0" frameborder="NO" framespacing="0" cols="*" rows="*,360">
</frameset>
<noframes><body> Text </body></noframes>
</html>
This Links should be generated:
-
Hit
-
Chase
The 'checkid=...' and the 'npc_id=...' must be the same value as in this link:
<a class="fastattack" onclick="this.href += '&yscroll=' + window.pageYOffset;" href="fight.php?action=attacknpc&checkid=8409099act_npc_id=764">Quickattack</a>
OK, this is really just basic HTML DOM manipulation, there's nothing GreaseMonkey-specific here.
First, I'm going to assume that the link you want to copy the URL parameters from is the only one with class="fastattack", since that makes finding it easy:
var link = document.getElementsByClassName( 'fastattack' )[0];
if ( link ) {
// we found the link, do stuff with it...
Next, we need to generate the first new link:
var newlink = document.createElement( 'a' );
...make it point to the URL we want:
newlink.href = link.href.replace( 'action=attacknpc', 'action=slapnpc' );
...and give it the link text we want:
newlink.textContent = 'Hit';
Next, we insert the new link into the DOM just after the original link, like this:
var nextNode = link.nextSibling;
link.parentNode.insertBefore( newlink, nextNode );
Oops, we forgot to insert the delimiter first! No worries, we can still do that:
var delim = document.createTextNode( ' - ' );
link.parentNode.insertBefore( delim, newlink );
Now we can just do the same for the other link:
var newlink2 = document.createElement( 'a' );
newlink2.href = link.href.replace( 'action=attacknpc', 'action=chasenpc' );
newlink2.textContent = 'Chase';
link.parentNode.insertBefore( delim.cloneNode( true ), nextNode );
link.parentNode.insertBefore( newlink2, nextNode );
This time, I remembered to insert the delimiter first. I used the same delim node as above, but I made a copy of it because I wanted to insert another identical delimiter, not move the original delimiter to a new position in the DOM.
Finally, we need to close the if block, and that's it:
}
(Disclaimer: I have not actually tested the code above. I think it should work, but there might be bugs or typos that I've missed.)
Edit: Changed the code to insert the new links just after the original, rather than at the end of the parent paragraph.
Addendum:
If you have multiple links with class="fastattack" in the document, and wish to apply the code above to each of them, you can do that by replacing the first two lines above with a loop over all the links, instead of just the first one:
var links = document.getElementsByClassName( 'fastattack' );
for ( var i = 0; i < links.length; i++ ) {
var link = links[i];
// now do stuff with link just like above
I want to add a backgound page for my Jsp page, In this i used a frameset when i used a backgound image for a main frameset its showing problem in FF and IE,
Code Is:
<frameset cols="*,1020px,*" border="0" class="bg" style="images/background.jpg">
<frame src="about:blank" />
<!-- Next frameset is centered horizontally and have width:1020px -->
<!-- Tested in IE8,Chrome13,Opera11.50,Safari5,FF7 -->
<frameset rows="8%,*" border="0" >
<frame src="HeaderUi.jsp" name="header" scrolling="no" style="border-bottom:5px solid #630000;" />
<frameset cols="220px,540px,*" border="0" style="background:#000">
<frame src="webSearchUi" name="search" />
<frameset rows="65%,*" border="0" >
<frame src="webMainPageUi" name="mainPage" scrolling="yes" style="border:1px dotted #7D7D7D; border-top:0px; border-bottom:0px dashed #5c5c5c" /> <frame src="webEventPanelUi" name="eventPanel" style="border:1px dotted #7D7D7D; border-top:1px solid #7D7D7D; border-bottom:0px dashed #5c5c5c" /> </frameset>
<frame src="webDataPanelUi" name="dataPanel" style="border-style:solid;border-width:0pt;border-color:66CC33">
</frameset>
<frame src="about:blank" class="Bg" />
</frameset>
</frameset>
<frame src="about:blank" /> </frameset>
In This Code i want to use a background-image.
Thanks in Advance
Mayur Mate
If you are going to use attribute style you should write there css styles in the following way:
style="property1: value1; property2: value2"
in your case the code should be:
<frameset cols="*,1020px,*" border="0" class="bg" style="background: url('images/background.jpg');">