|
JavaScript - Body Html Of Iframe
Hi my code returns all the html of the iframe. I would like just the body html. Any one know how to amend to suit?
Code: alert( $("#uploaderIframe").contents()[0].documentElement.innerHTML );
Similar TutorialsThe Js code is used for lightbox picture gallery.. THe code works perfectly in IE and Firefox but not in chrome Can any body explain the js in this html file and explain how i can get it to work in chrome... Thanks PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><!-- InstanceBegin template="/Templates/new.dwt" codeOutsideHTMLIsLocked="false" --> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- InstanceBeginEditable name="doctitle" --> <title>Bouncing Castles Cork, Bouncy Castles Cork, Cork Bouncing Castle, Djs for Kids Parties in Cork</title> <!-- InstanceEndEditable --> <!-- InstanceBeginEditable name="EditRegion3" --> <meta name="Description" content="Bounce Castles Cork for Bouncy Castles in Ireland, Irish Inflatable Games, Bouncy Castle Rentals and Inflatable games for events around Ireland, entertainment and leisure industry throughout Ireland."/> <meta name="Keywords" content="Bouncing Castles Cork, Bouncy Castles Cork, Cork Bouncing Castles, Cork Bouncy Castle, Childrens entertainment adult entertainment, Cork festivals Fun fairs Fun days " /> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> var flashvars = {}; flashvars.settingsXML = "settings.xml"; var params = {}; params.scale = "noscale"; params.salign = "tl"; params.wmode = "transparent"; var attributes = {}; swfobject.embedSWF("dockmenu.swf", "dockmenuDiv", "600", "200", "9.0.0", false, flashvars, params, attributes); </script> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects" type="text/javascript"></script> <script src="js/lightbox++.js" type="text/javascript"></script> <script type="text/javascript"> function GroupDelegate(id) { var objLink = document.getElementById(id); Lightbox.prototype.start(objLink); } </script> <!-- InstanceEndEditable --> </head> <body> <!-- main wrap starts here --> <div id="main-wrap"> <!-- header starts here --> <div id="header"> <h1><a href="../index.html">Dream Bouncing Castles</a></h1> </div> <!-- header ends here --> <!-- menu container starts here --> <div id="menu-container"> <ul> <li><a href="../index.html">Home</a></li> <li><a href="#">Bouncing Castles</a></li> <li><a href="#">DJs for kids Parties</a></li> <li><a href="../contact.html">Contact us</a></li> </ul> </div> <!-- menu container ends here --> <div class="clear"></div> <!-- body container starts here --> <div id="body-container"> <div id="banner_boy_wrapper"> <div id="banner"></div> <div id="boy"></div> </div> <!-- InstanceBeginEditable name="EditRegion4" --> <!-- welcome container starts here --> <script type="text/javascript"> var xmlDoc; var numitor; if (window.ActiveXObject) { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); numitor=1; } else if (document.implementation.createDocument) { xmlDoc=document.implementation.createDocument("","",null); numitor=2; } else { alert('Your browser cannot handle this script'); } xmlDoc.async=false; var xmlFile = "images.xml"; xmlDoc.load(xmlFile); var x=xmlDoc.documentElement.childNodes; for (var i=0;i<x.length;i++) { if (x[i].nodeType==1) document.write("<a id='img",(i+1)/numitor,"' href='", x[i].getAttribute("bigimage"),"' rel='lightbox[img]' title='", x[i].getAttribute("lightboxInfo"), "'></a>"); } </script> <div id="welcome-container"> <h2>Our Bouncing Castles</h2> <p>Below you can see all the bouncing castles we hire out</p><br /> <div id="dockmenuDiv"> <a href="http://www.adobe.com/go/getflashplayer"> <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> </a> </div> </div> <!-- welcome container ends here --> <div class="clear"></div> <!-- bouncy container starts here --> <!-- bouncy container ends here --> <!-- InstanceEndEditable --> <div class="clear"></div> </div> <!-- body container ends here --> <!-- footer starts here --> <div id="footer"> <a href="../index.html">Home</a> | <a href="#">Bouncing Castles</a> | <a href="#">Djs For Kids Parties</a> | <a href="../contact.html">Contact Us</a><br /> Copyrights 2009. All Rights Reserved </div> <!-- footer ends here --> <div class="clear"></div> </div> <!-- main wrap ends here --> </body> <!-- InstanceEnd --></html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script language="Javascript" type="text/javascript"> function user_prompt() { alert.("Hello there"); } user_prompt(); </script> </head> <body> </body> </html> I am such a noob. But I am so bad I cannot even get a window alert to pop up. All I want to do is call the function in the body. But do not know how... I have a function which I placed in the header of my html file: Code: <script language="javascript" type="text/javascript">
function UngreyInstallButtons() {
document.form1.viewbutton1.disabled = false;
document.form2.viewbutton2.disabled = false;
document.form3.viewbutton3.disabled = false;
}
</script>
I want to call this from within the body of my html page: Code: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
var name = GetCookie('COOKIENAME');
if (name != null) {
alert("I GET HERE" + name + "!");
UngreyInstallButtons();
alert("I DONT MAKE IT HERE");
}
//-->
</SCRIPT>
The GetCookie func works and returns name correctly. The first alert() box is displayed, - the second one isn't! It does not come back from the call to UngreyInstallButtons() Why? I also tried this: Code:
if (name != null) {
alert("I GET HERE" + name + "!");
document.form1.viewbutton1.disabled = false;
document.form2.viewbutton2.disabled = false;
document.form3.viewbutton3.disabled = false;
alert("I DONT MAKE IT HERE");
}
Again, it does not execute the = false lines at all. Perhaps I'm missing something obvious? (I am new to js) I have a html where the user will just need to keyin the .pdf value and it will retrieve the file and it will be copied to local drive for certain reason. Once it's copied to local file, it will be display in IE. After the user has finished reading the .pdf, the user will click on one button to reload the html. Now I want to add in a delete function to delete the local saved .pdf. When I try to call the function after my "window.location.reload()" , the delete function will definitely not running. So, is it possible to close the .pdf file with javascript first, then delete the local saved .pdf, then here we reload the html ? Thanks for suggestion. Note : The .pdf will be display in the same window and same tab of IE. Whole html will be running in only one tab and window. Code: function reloadPage()
{
window.location.reload()
remove();
}
function remove()
{
var sBnr = document.getElementById("txtBnr").value;
var myObject;
var fso = myObject = new ActiveXObject("Scripting.FileSystemObject");
fso.DeleteFile("C:\\eBondingDiagram\\" + sBnr + ".pdf");
}
I save an Access query as an HTML file (query.html) I then load an HTML page (TopStyle.html). This loads the query.html. I want query.html to autoscroll to the end of the page, and then either scroll to the top or just start again. [code] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript" language="JavaScript" ></script> <title>How to Scroll the Page With JavaScript</title> <meta name="description" content="How to scroll the page automatically using JavaScript." /> <meta name="keywords" content="javascript, page, scroll" /> <script type="text/javascript"> function pageScroll() { window.scrollBy(0,50); scrolldelay = setTimeout('pageScroll()',10000); // scrolls every 1000 milliseconds } </script> </head> <iframe src="file:///D:/PrivateDocs/WorkflowPage/Query1.html" name="frame1" scrolling="auto" frameborder="no" style="float:left" height = "100%" width = "100%"></iframe> <body> <body onLoad="pageScroll()"> </body> </html> [icode] Problem 1 is I can't get the height 100% to work. I get a box about 150px high. Problem two is the main HTML page does a small scroll but how do I get the Query in the Iframe to scroll? All help appreciated. Harle I have the following HTML code in main.html: Quote: ............. ............. <tr align="right"> <td width="50%"> ... ... ... </td> <td width="50%"> <iframe src="../createproject.html width="100%" height="400pt" frameborder="0" scrolling="no"> </iframe> </td> </tr> ........... ........... and createproject.html: Quote: <html> <head> <link rel="stylesheet" type="text/css" href="../user.css" /> <script type="text/javascript" src="../projects.js"></script> <head> <body onload="return capture_profile()"> <div align="right" class="data-font"> <form action="/cgi-bin/createproj.cgi" method="POST"> <fieldset> ....... ....... ....... </fieldset> </form><br/> </div> </body> </html> I'd like capture with capture_profile() function in createproject.html a value into main.html page. How can I solve this problem with javascript? Hey the Title basically says I need a way to read the iframe url even when you navigate to a different page it will read again and keep tracking where the URL is on. Display the URL of the iFRame all the time how would I do this is it possible? Javascript HTML PHP Is used Hi, folks! Having a big issue he i got a code that works fine in Chrome, FF, but seems unreadable by IE. Got a main HTML code that have a DIV tag, declared like this Code: <div id='leframe' style='visibility:hidden'></div> Then, I call, through a Flash file, an external function that says: Code: function loadNextPg(nextPg) {
var varDiv = "<iframe src='pg"+nextPg+".htm'></iframe>";
document.getElementById("leframe").innerHTML = varDiv;
}
}
It would load the HTML named (pg'+nextPg+'.htm), where nextPg is a String value ("01", "02", etc). It works WONDERFULLY in Chrome, FF, etc, but not in IE. Does anyone know if I'm doing anything wrong? Best regards and thanks in advance. I have an HTML page that is making use of JQUERY and many other JQUERY plugins. Inside this HTML page there are 2 different types of iFrames that display PHP forms. One is a normal iFrame: Code: <iframe height="740" allowTransparency="true" frameborder="0" scrolling="auto" style="width:100%;border:none;overflow-x:hidden" src="https://www.website.com/machform/embed.php?id=9" title="Contact Us"><a href="https://www.website.com/machform/view.php?id=9" title="Contact Us">Contact Us</a></iframe> The other makes use of a JQUERY plugin called Shadowbox: Code: <a href="https://www.website.com/machform/embed.php?id=8" rel="shadowbox;width=1100;height=950;player=iframe" class="button1"><span></span><strong>Click Here</strong></a> Inside these iFrames are PHP forms from a PHP form application called MachForm, which is highly customizable. Here are the questions. Ultimately, I want to accomplish 2 things: 1. I would like to send variable information from the PHP form in the iFrame to my HTML page, to be displayed within javascripts. For example: If someone fills out a PHP form in my iFrame and clicks submit, I want to have a JQUERY popup say, "Thank you, [NAME]". 2. When the user submits the form, the action of clicking the submit button in the PHP form should enable #1, above. There needs to be a way to tell the HTML/Javascript that the submit button on the PHP form in the iFrame has been clicked. I realize this is all fairly vague, especially without the addition of more code. However, I am not even sure if I am posting this in the correct forum, since it incorporates a little of several languages and styles. From this point any direction or idea would be very helpful! Hi there everybody, I've got this problem which I can't solve myself... I've got a website which has 3 colums and is hosted on domain1.com. in the right column I've got an Iframe which loads content from domain2.com . this content are some textboxes and a datepicker tool. if I press the 'search'-button in this Iframe I would like to refresh the mainpage (from domain1.com) so that another Iframe appears in the middle column. in this column i would like to load a new form from domain2.com which contains the values that I've put in in the form from the right Iframe. Unfortunally I can't get this to work... Will somebody please help me? Is there a way to resize an iframe dynamically so that you never get the scroll bar and essentially hide that there is an iframe? Better integration really. Basically I want to iframe a forum into my site so that the design down the sides and top which my friend does using iweb are not messed with. We have a central area which can be longer or shorter depending on the forum. Hi all, I hope you can help I have some code which: 1) Opens a URL (e.g. google.com) in a hidden iframe, then 2) Redirects the visitor to a different URL (e.g. yahoo.com) after it has loaded... This works exactly as I need. What I'd like to do is the following: 1) Open a URL (e.g. google.com) in a hidden iframe, then 2) Redirect the visitor to a different URL (e.g. yahoo.com) in a full-screen iframe 3) The address bar of the full-screen iframe should be my domain (obviously!) Here's what I have so far... Hidden iframe -> New URL Code: Code: <html>
<body>
<script type="text/javascript">
var page_body = document.getElementsByTagName('body');
var myframe = document.createElement('iframe');
var id = Math.random();
myframe.setAttribute('id', 'myFrame'+id);
myframe.src = 'http://google.com'; //First open Google in hidden iframe
myframe.setAttribute('frameborder', '0')
myframe.setAttribute('width', '0');
myframe.setAttribute('height', '0');
if (myframe.attachEvent)
{
myframe.attachEvent('onload', function()
{
top.location = 'http://yahoo.com'; //Once loaded redirect to Yahoo -- but the address bar shows yahoo.com -- I want the address bar to display mydomain.com/page.html
});
}
else if (myframe.addEventListener)
{
myframe.addEventListener('load', function()
{
top.location = ('http://yahoo.com');
}, false);
}
page_body[0].appendChild(myframe);
</script>
</body>
</html>
I have an example of some code which displays the full screen iframe, but my problem is... ...I can't figure out how to redirect to this after the hidden iframe has loaded Here's an example of how I want the redirect to display -- after the initial hidden iframe has loaded: Code: <html>
<head>
<script type="text/javascript">
function sendParams() {
document.body.style.overflow = "hidden";
}
</script>
</head>
<body>
<!--Open Yahoo.com in a full screen iframe, and disable extra scrollbar -->
<iframe height="100%" width="100%" frameBorder="no" onload="sendParams()" src="http://yahoo.com"></iframe>
</body>
</html>
I've been beating my head against the wall today trying to figure this out, and I'm fresh out of ideas. If you can help, you'll have some serious gratitude and good karma thrown your way! Best wishes, and thanks in advance, Paul Solve thank you for that forum, kind pepole and very inspiring <html> <head> <meta http-equiv="Content-Type" CONTENT="text/html; charset=iso-8859-1"> <TITLE>dimension * price : then bring the right page in iframe depending of result</TITLE> <script type="text/javascript"> function donne_brut(){ var price = 2.41; //probably should hide this in form somehow? var D = parseFloat(document.getElementById("saisie_net").value); var Tot = (D * price).toFixed(2) ; if ( isNaN(Tot) ) Tot = ""; document.getElementById("champ_resultat").value = Tot; //alert(Tot); if (Tot > 3301){ document.getElementById("myiFrame_Id").src = "http://localhost/1301+.html"; } else if (Tot > 2501&& Tot < 3300){ document.getElementById("myiFrame_Id").src = "http://localhost/1300.html"; } else if (Tot > 1601&& Tot < 2500){ document.getElementById("myiFrame_Id").src = "http://localhost/1000.html"; } else if (Tot > 851&& Tot < 1600){ document.getElementById("myiFrame_Id").src = "http://localhost/650.html"; } else if (Tot < 850 && Tot > 2.40){ document.getElementById("myiFrame_Id").src = "http://localhost/350.html"; } else{ //default page if no value entered document.getElementById("myiFrame_Id").src = "http://localhost/defaut.html"; } } </script> </head> <body> <div align="center"> <form name="form_brut" action=""><div align="center">entrer your number here<br> <input type="text" id="saisie_net" name="saisie_net"/> <br> <br><p> <input type="button" value="result" onClick="donne_brut()"> </p> <br> your prices<br><input type="text" id="champ_resultat" name="champ_resultat" readonly /> </div> </form> <iframe id = "myiFrame_Id" width="650" height="800" frameborder="0" scrolling="no" ></iframe> </body> </html> I have used iframes for my site and found various javascripts so when a person clicks on say the audio page he http://www.krillmeed.com/index.html it takes them to the audio page but will load it into the index.html page. The problem is, especially with search engines, to point to that page, this is what the URL looks like to send someone to that page: http://www.krillmeed.com/?frame=0&sr...m%2Faudio.html which is not very clean at all, this is the javascript that i found that at least works: Child iframe script: Code: <script type="text/javascript">
(function(){
var qstr = '?frame=0&src=' + encodeURIComponent(location.href),
lre = new RegExp('^' + location.protocol + '//' + location.hostname + '(()|(/)|(/index.html)|(/index.php))(()|(\\' + qstr + '))$');
if (!lre.test(parent.location.href)){
top.location.href = '/' + qstr;
}
})();
</script>
Parent iframe Script: Code: <script type="text/javascript">
(function(){
function getQval(n) {
if(typeof n !== 'string'){
return null;
}
var r = new RegExp('[?&;]' + n + '=([^&;#]*)'), m = location.search;
return (m = r.exec(m))? unescape(m[1]) : null;
}
var f = getQval('frame'), s = getQval('src');
if(f && frames[f] && s && s.indexOf(location.protocol + '//' + location.hostname + '/') === 0){
frames[f].location.href = s;
}
})();
</script>
Is there a "cleaner" way of doing this? This was an old code, i have yet to find a more modern one. Thank you in advance. Hi, Not sure if I worded that question right. I have a web page which will display another web page in an iframe. But the content inside the iframe may change while the user interacts with it so I need to be able to resize the iframe height from code on the page inside the iframe. Any tips on how I can do that? I am using php and javascript. Thanks. this: Code: <body onload="pack = 'Original';recoger_mapa_url();" onkeydown="pulsar_tecla(event, 'onkeypress');" onkeypress="pulsar_tecla(event, 'onkeydown');"> [/CODE] to this: Code: pack = 'Original'; recoger_mapa_url(); window.onkeydown = pulsar_tecla(window.event, 'onkeypress'); window.onkeypress= pulsar_tecla(window.event, 'onkeydown'); does not work(event is undefined). Suggestions ? i had to put to onload commands in a body tag and now only one will work. is there any way to make both work?
hi guys, how can i get this code to load on body onload? without fading in and out? Code: <html>
<head>
<!-- For ease i'm just using a JQuery version hosted by JQuery- you can download any version and link to it locally -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$("#responsecontainer").load("response.php");
var refreshId = setInterval(function() {
$("#responsecontainer").load('response.php?randval='+ Math.random());
}, 9000);
$.ajaxSetup({ cache: false });
});
</script>
</head>
<body>
<div id="responsecontainer">
</div>
</body>
Thanks Hello, How can i get scroll bar position of body tag ? Thanks in advance. I have an iframe that is a specific height and width. I want to detect whenever the the iframe is no longer exactly the height i set it to. If a user has CSS turned off for example the iframe will be in default height and width. I want to detect that. This is how you'd normally do it but this only returns the original size (try with 'no style' in Firefox): Code: function getSize()
{
alert('height is now '+document.getElementById("Iframemain").height)
alert('height is now '+document.getElementById("Iframemain").width)
}
Is it possible? |
|||||||