|
JavaScript - Iframe Communication...
I have written code for two function. One takes two strings and puts them into an array. The other function takes that array and generates buttons to be written into a different iFrame. The way the page is set up is the main page, name="contentFrame" and name="buttonFrame"
Below is what I have written. So far in IE (note: must use IE, no FF) I have managed to get my function to refresh the frame that it's being called in, but NOT the other frame (buttonFrame) That's what I need to do, as can be deduced from the code. Lastly, let me ammend this post by saying that I'm a PHP coder, not a JS coder, so bear with me I'm still learning JS. Code: // Declaring vars!! yahoo!
// Set cmdKey counter (so we know which order we load our values in...)
var cmdCtr = 0;
// Define our array that will hold the various keycodes for the buttons
var cmdKeyCode = new array;
// Define our array that will hold the keytexts
var cmdKeyText = new array;
// To grab button ID's and Values on the fly from the JIT...
function addCmd(Text, keyCode)
{
cmdKeyCode[cmdCtr] = keyCode;
cmdKeyText[cmdCtr] = Text;
cmdCtr++;
}
// Function for creating an html string from arrays,
// refresh button frame and then write buttons to frame.
// THIS FUNCTION IS EXECUTED FROM THE CONTENT FRAME - writes to buttonFrame
function writeCmd()
{
// Since this function is called immediately after the button arrays are populated..
// we need to make sure that the button frame is empty and ready to accept new buttons!
// Since the button frame is a blank html doc, all we gotta do is refresh it... :)
top.buttonFrame.document.reload();
// Let's make this blank page valid html...
var htmlOpen = "<html><head><link rel='stylesheet' type='text/css' src='master.css' /></head><body>";
top.buttonFrame.document.write(htmlOpen);
for(i=0; i < cmdCtr; i++)
{
var value = cmdKeyText[i];
var code = cmdKeyCode[i];
// Let's write the buttons!!
top.buttonFrame.document.write("<input name='" + code + "' type='button' value='" + value + "' id='" + code + "' class='submenu_special' />");
}
// Let's close our HTML in the button frame
var htmlClose = "</body></html>";
top.buttonFrame.document.write(htmlClose);
}
// Code for hiding/showing menu items
function showHide(theid){
if (document.getElementById) {
var switch_id = document.getElementById(theid);
if(menu_status[theid] != 'show') {
switch_id.className = 'show';
menu_status[theid] = 'show';
}else{
switch_id.className = 'hide';
menu_status[theid] = 'hide';
}
}
}
Similar TutorialsHi, I am trying to follow this tutorial and make a login feature for my apphttp://code.google.com/webtoolkit/do...unication.html to use GWT's remote procedure calls (RPC) to have server client communication to eventually make a web app that talks to a database. I thought I followed it exactly but when the async returns it fails and returns an exception: "com.google.gwt.user.client.rpc.InvocationException" Can someone please take a look at the client code, it must be something stupid that I am doing wrong. Thanks Here's the code: In the calling client class: Code: private MyServiceAsync svc = (MyServiceAsync) GWT.create(MyService.class);
((ServiceDefTarget)svc).setServiceEntryPoint(GWT.getModuleBaseURL());
//loginButtonListener
btnDBLogin.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
svc.checkLogin(txtUsername.getText(),txtPassword.getText(), new AsyncCallback<Boolean>() {
public void onSuccess(Boolean result) {
if (result.booleanValue() == true) {
System.out.println("Works");
}
else {
System.out.println("Invalid UserName or Password");
}
}
public void onFailure(Throwable ex) {
System.out.println("FAILU " + ex.toString());
}
});//end checkLogin
}//end onCLICK
});//endbtnlistener
MyService.java (client interface) Code: package com.rob.projects.client;
import com.google.gwt.user.client.rpc.RemoteService;
public interface MyService extends RemoteService {
public Boolean checkLogin(String userName, String password);
}
MyServiceImpl.java (server code) Code: package com.rob.projects.server;
import com.rob.projects.client.MyService;
import com.google.gwt.user.server.rpc.RemoteServiceServlet;
public class MyServiceImpl extends RemoteServiceServlet implements MyService {
private static final long serialVersionUID = 1L;
public Boolean checkLogin(String userName, String password) {
System.out.println(userName);
if (userName.equalsIgnoreCase("bingo")) { // Check the database
return true;
}
else
return false;
}
}
web.xml (to specify where the servlet is) PHP Code: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd"> <web-app> <!-- <servlet> path='MyService'class='com.rob.projects.server.MyServiceImpl' </servlet> --> <!-- Servlets --> <servlet> <servlet-name>MyServiceImpl</servlet-name> <servlet-class>com.rob.projects.server.MyServiceImpl</servlet-class> </servlet> <servlet-mapping> <servlet-name>MyServiceImpl</servlet-name> <url-pattern>/satapp</url-pattern> </servlet-mapping> <!-- Default page to serve --> <welcome-file-list> <welcome-file>SATapp.html</welcome-file> </welcome-file-list> </web-app> Ok, so I consider myself to be fairly proficient with programming in general, although I am admittedly new to bi-directional networking. So here I am asking about methodological approaches. A non-disclosure clause prevents me from giving any details, but I don't think they would actually be pertinent. What is important is that the system must accept input from client side Javascript from many users and disseminate that input (once processed) to a number of users. In a way, think multi-channel chat system (totally different environment, but the mechanisms seem similar). As I see it, I have two options: periodic server polling, or server-sent events (compatibility with IE is not a requisite). So, my question is, which method (of these two or even something that I am not thinking of) is superior from the standpoint of server bandwidth? Periodic server polling obviously seems as if it would send a great many unneeded requests, but my hesitation for dismissing this method is that I don't see any client being idle for any considerable length of time (thus the client will send commands to the server quite often) and it simplifies my server software by delegating that section of logic (which data chunks need to be updated) to client CPU's. Additionally, I can throttle the update period based on server load. Server-sent events initially sounded like a great idea until I thought about the extreme likelihood of a large number of users (upwards of a hundred) interaction with the same chunk of data, thus requiring that each client receive an update every time another client does anything, which is likely once ever second or two, thus resulting in hundreds of updates being sent to hundreds of clients every second. Sounds similar to a denial of service situation to me. Anyway, I think I already know what I'm going to do for this project, but thought that this might be a good way to introduce myself to these forums. 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 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? 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 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. 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? Hello to all and thanks in advance for my help. I know this has been posted in different places on the web but I have found no solid solution. Here is my problem: I have an iframe the loads up a page on a remote server (out of my hands) and when I send certain information to it, the page redirects my entire site to their 404 page. I need to prevent this from happening so I engaged in much research and found this... temporary fix: Code: <script>
// No redirection!
var prevent_bust = 0
window.onbeforeunload = function() { prevent_bust++ }
setInterval(function() {
if (prevent_bust > 0) {
prevent_bust -= 2
window.top.location = 'http://www.mysite.com/my404.html'
}
}, 1)
</script>
What this code does, is that every time the unload of a page happens, it will redirect me to my404.html and this does solve the problem of the iframe trying to redirect my entire site but anytime a user tried to go to a new website by typing it in the address bar, they are redirected to my404.html. Is there another solution for me so that the page within the iframe cannot redirect the parent page? Hello.... I've 2 iframes. And i want to change the css class of second iframe anchor tag from the first. Code: <div id="top-navigation" title="top-navi">
<ul><li id="homePageLink" class="first">
<a id="homePageTab" class="navigation-font" href="</a>
</li>
</ul>
</div>
In the above code how can i change the class="navigation-font" from the first iframe? Please help.... Hi I have a page with 3 iFrames, showing different content. iFrame1: Here is a navigation php page. Click on a menu item and it loads a php page in iFrame2 iFrame2: Here is a list of items from a database. iFrame3: I load 3 different php pages here. (A) is the main showing page. (B) and (C) is a record manipulation page, that does some editing in the database and then redirects to (A). When the (A) php page loads, it should reload iFrame2 I have tried to put something like: <body onLoad=parent.location.reload()> and put it on the (A) php page. This will reload the entire page, which works. However, it results in a loop of reloads, as the (A) iFrame file will load with the entire page reload... So, I was looking for the right code to put, like onLoad=iFrame2.location.reload() However, I can't seem to find the correct code, so I hope any of you can help me... Hi Am new to javascript. I have a requirement where user clicks on a image which should direct to iframe. Please follow 2 scripts and please advice how to open iframe link instead of link in window.open Image code: <img src = "../samples/images/Edit3.png" alt = "Edit Status" height = 13 width = 13 onclick = "window.open('../cgi-bin/cognos.cgi?b_action=cognosViewer&ui.action=run&ui.object=%2fcontent%2ffolder%5b%40name%3d%27NARM%27% 5d%2fpackage%5b%40name%3d%27TM1_NARM_RISK_DASHBOARD_CREDIT_FINANCE%27%5d%2ffolder%5b%40name%3d%27Cre dit%20Finance%20Overlay%20Reports%27%5d%2freport%5b%40name%3d%27%23%2060%2b%20Rate%27%5d&ui.name=%23 %2060%2b%20Rate&run.outputFormat=&run.prompt=true','KPIDetail','width=600,height=350,scrollbars=yes,left=300,top=300')"> Iframe code: <iframe src="http://tm1lab.us.hsbc/TM1Web/TM1WebMain.aspx?AdminHost=tm1lab.us.hsbc&TM1Server=narm_risk_dashboard&action=OpenObject&type=Webshe et&value=Applications/CF_Commentary/H60Rate" width="100%" height = "100%" scrolling=no > </iframe> Hello, I've lately brought a new search engine scirpt however I was wonder how i could grap what ever the url is being viewed in the iframe, in order to create a hyperlink button which wil take the user to what ever is displayed in the iframe, but without my frame? Very simplilar to the 'remove frame' link that google images has on it's search result pages. I firstly thought that a PHP code would have being able to do this. However after being told my a number of PHP experts I relised that Java was the way forward. Therefore I would love any help what so ever in help me to carry out this task. I've attached the search page from my site with the iframe located. However i've had to change the file from PHP to txt. Many Thanks Hello Experts I need your advice. I dont know if this is the write place to post my query. But I have an assignment due today. I have got everything working except an iframe that is driving me nuts. the question on the assignment asks to insert a command to write the HTML code <iframe src='weekday.htm'></iframe> to the webpage where weekday is the text string returned by the weekDay() function. The iframe should display the daily schedules that are stored in the sunday.htm through saturday.htm file. The weekDay() function is located in an external .js file that I have already linked to my webpage. Another thing is there is no weekday.htm file instead there are files sunday.htm through saturday.htm that have the daily schedules to de displayed in the iframe. I know that I should some link the weekday.htm file to the weekDay() function. This is what I have done so far: <h2 id="title">Today at the Union</h2> <p> <script type="text/javascript"> /* Dispaly the daily schedule in an inline frame. Display schedules are stored in the files sunday.htm through saturday.htm */ <iframe src='weekday.htm'> var weekday = weekDay(); document.write(weekday); </iframe> </script> </p> Please advice as to how to get this thing working. I am not an expert( I am still learning.) I tried my best (spent several hours breaking my head on this). So any help is much appreciated. Thank you for your time Above is the image of my situation, what I need is for the captcha's to be loaded perfectly and displayed to the user as shown in the image with the green box around it, I currently have a script to set focus to the text field however it is kind of messy for some reason and ends up leaving it looking like the frame in the red box in the image. Here is what I have been using: Code: if (( document.URL.indexOf("cast_skills") != -1 ) || ( document.URL.indexOf("security_prompt") != -1 ) || ( document.URL.indexOf("joinraid") != -1 )){
if ( document.forms.length > 0 ) {
document.forms[0].elements[1].focus();
}
}
This works fine since on each of the pages it is required there is only 1 form. However when loading smaller frames it causes some problem. The next question I have to ask is, is it possible to have a script that when the enter key is pressed inside frame 1, automatically move the focus on to the text field in frame 2? Noting that the page inside the frames is not my own and I cannot do anything with it. Any help would be appreciated with this matter, Many thanks. does not work in iframe, the error described he http://groups.google.com/group/ie7-j...73a3e?lnk=raot if I do correction as suggested then the error dissapears, but does not work (hover). Anyone found solution for that ? I want to change iframe.src value? So I use following code,when I click 'Click here',I find the iframe don't go to b.html page,why? Where is error? How to correct my code? Thanks My code is follows: Code: <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" type="text/javascript">
function showDiv(){
document.getElementById('popDiv').style.display='block';
document.getElementById('popIframe').style.display='block';
document.getElementById('bg').style.display='block';
document.getElementById('popIframe').src='b.html';
}
</script>
</head>
<body>
<div id="popDiv" class="mydiv" style="display:none;">This is a test
<div id="bg" class="bg" style="display:none;"></div>
<a href="javascript:showDiv()">Click here</a>
<iframe id='popIframe' class='popIframe' frameborder='0' ></iframe>
</body>
</html>
On my page there's an iframe containing a div which I've hidden with code on the actual iframe page. I want the iframe content only to be accessible by clicking a button on the main page. Here's the main parts of the code: Within the iframe: Code: <html>
<head>
<script language="javascript">
<!--
var state = 'none';
function showhide(layer_ref) {
if (state == 'block') {
state = 'none';
}
else {
state = 'block';
}
if (document.all) {
eval( "document.all." + layer_ref + ".style.display = state");
}
if (document.layers) {
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}
//-->
</script>
</head>
<body onload="showhide('div')" style="display: none;">
<div id="div" name="div">
Some Content...
</div>
</body>
</html>
And on the main page: Code: <html>
<head>
</head>
<body>
<div id="div1">
<iframe onload="iFrameHeight()" id="blockrandom"
name="iframe"
src="http://somewhere.com/"
width="100%"
height="500"
scrolling="auto"
align="top"
frameborder="0"
class="wrapper">
This option will not work correctly. Unfortunately, your browser does not support inline frames.</iframe>
</div>
<div id="div2">
<input type="button" value="Show/Hide Search" onclick="document.getElementById('blockrandom').contentWindow.showhide('div')">
</div>
</body>
</html>
The page hides successfully but I can't get it to show again from the button on the main page. If there's something wrong with my code or if there was a way that the iframe page could check if it was loaded on the right page or not would be great although i'm not sure if that's possible. Any solutions or alternatives are welcome. Thanks. P.S. This is on Joomla CMS, I don't think it should make a difference but correct me if I'm wrong. Hello, If JavaScript is disabled, does the content in an iframe become un-viewable/ blocked? This is in general, regardless of how safe or trusted the website/ content is. Code: <html> <head> <noscript>Javascript is disabled. Having it enabled provides the greatest functionality.</noscript> </head> <body> <noscript>Javascript is disabled. Having it enabled provides the greatest functionality.</noscript> <iframe src="first.html" width="300" height="300" /> </body> </html> I dont know the best way to explain this in tech terms so I will do my best in laymen. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="REFRESH" content="5;url=http://www.COMPANYSITE.com/search"></HEAD> <BODY> <P ALIGN=center><IFRAME SRC="http://www.COMPANYSSITE.com/Agents/template1/realtorPage.aspx?realtor=agent name" WIDTH=15 HEIGHT=15> If you can see this, your browser doesn't understand IFRAME. However, we'll still <A HREF="hello.html">link</A> you to the file. </IFRAME></p> <center><img src="loader.gif"></center> </BODY> </HTML> So the problem is that a user must go to http://www.COMPANYSSITE.com/Agents/t...?realtor=agent name" before going to the /search page because (i assume) it loads a cookie... |
|||||||