Member Avatar for ankitjain_dce

Hi,
Can we write javascript in iframe?
I want to call a external application javascript in my iframe of the jsp i am writing....issue is we can only have one call of this JS per page,now I am importing some html tags from a 3rd party which also does this Javascript call usig c:import...if this JS is called more than once my call will be ignored.
Only way that I have figured to fix it is by making these calls in separate iframes, by using iframes it appears to the external application that js is called by a separate page and it processes it.
So,what I am looking for is this:
1)First is there a way to do it w/o using iframe:
ex code:
//import a 3rd party url(<c:import url='url>) which has this script:
<script>
var="something"
call external js and pass this var
</script>

//this is inside my jsp
<script>
var1="something new"
call external js and pass this new var1
</script>

Now my call is ignored if i use say c:import to import first url...if i use iframe it works.

2.Now if i put my js script inside an iframe.

<iframe src="" width="0" height="0" frameborder="0" scrolling="No" marginheight="0" marginwidth="0" topmargin="0" leftmargin="0">
<html>
<head>
<script>
<language="javascript" src="some url"
</script>
</head>
<body/>
</html>
</iframe>

It doesn't work.

Please suggest.

  • 3 Contributors
  • 10 Replies
  • 7K Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by ankitjain_dce
Member Avatar for essential

Getting variables or functions from external script, requires page caching, so accessing this file via dynamic insertion, is impossible without reloading the page for caching its content -- And also reloading the page is not part of this idea.

But there's 2 options to acomplish this:

1. is to make an AJAX call for this file and strip all the variable and functions you need on the file.

2. if you really need the content of this file inside your iframe, then simply breakout the whole AJAX request and inject it to your frame, to use all the variables and functions you need gathered from the AJAX response.

Member Avatar for Jupiter 2

An IFrame is like a window except it sits inside the current window.
The target window (the iframe) contains a web page

<frameset rows=135,* bordercolor=blue border=0>
<frame name="banner" src="banner.htm" scrolling=no>
<frame name="base" src="opener.htm" scrolling=yes>
</frameset>
</frameset>

You can create a document on the fly and then reference it to the iframe, I think, but maybe the iframe needs an existing web page. i'll try it out and let you know.
I'll send you more

Member Avatar for essential

Here's a demo of injecting simple function inside the iframe page.

<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Test Page</title>
<style type="text/css">
/* <![CDATA[ */
iframe {
  display : block;
  border : 1px solid #ccc;
  min-height : 600px;
  margin : 0 auto;
  width : 100%; }
/* ]]> */
</style>
<script type="text/javascript">
<!--
var inject;
var $;

   $ = Object.prototype.$ = function( ids, frameD ) {
   ids = (( document.getElementById ) ? document.getElementById( ids ) : (( document.all && !document.getElementById ) ? document.all[ ids ] : document.layers[ ids ] ));
   if ( frameD && !document.layers ) {
      if ( document.getElementById ) {
   return ids.document.getElementsByTagName( frameD );
      } else if ( document.all && !document.getElementById ) {
   return ids.document.all.tags( frameD );
   }
   } else {
   return ids;
   }
};

inject = function( ) {
   $("iframed", "head")[ 0 ].innerHTML += "<script type=\"text/javascript\" id=\"sample\"></script>";
   $func = $("iframed","script")["sample"];
   $func.innerHTML += "var hello = function( sayWhat ) {\n";
   $func.innerHTML += "alert( sayWhat );\n"; 
   $func.innerHTML += "}\n";
   $body = $("iframed", "body")[ 0 ].innerHTML += '<a href="javascript:void(0)" onclick="hello(\'Hello World!\');">Function injected by the parent window</a>';
};

window.onload = inject;  

// -->
</script>
</head>
<body>
<div id="main">
<iframe src="iframe.html" id="iframed" name="iframed"></iframe>
</div>
</body>
</html>
Member Avatar for Jupiter 2

Attached is 4 web pages. I was going to refer you to my Javascript site but I just saw some errors on it. I have the original scripts so I have made adjustments.

It allows the user to type with the mouse using the Alphabet in a table keyboard. Click the letters and the results go to the bottom frame.

The main page is Farmer.htm

I wrote it about 7 years ago. You might be able to use some of the code to implement it into what you need.

It's not complicated (too much) but it is basic html and javascript.

I was going to modify it so the onload event would write directly to the bottom frame but I'm too tired now (1am).

Hope it helps and if not at least you can write a letter to someone when your keyboard doesn't work.
====================================
"....."

farmhands.zip (4.37 KB)
Member Avatar for ankitjain_dce

Hi essential and jupiter2 for responding fast to my query.
These are the fundamental questions i should have asked:
1.I was trying to write <script></script> inside <iframe/> which might be possible using AJAX as essential said below(corret me essestial if i m wrong) but iframe is a holder of another html or jsp as jupiter pointed below too, it shouldn't be used for writing javascript....we have <html> for that.
I have removed script from iframe now, wrote a jsp with the js code and calling this jsp in src of iframe which looks to be the standard way to do it.

2.Second thing I am struggling to understand is difference between c:import and iframe....say you do <c:import url="google.com">, it will import everything written client side for google.com including any JS call while if u do <iframe src="google.com"> it will only import html content....i know i should probably see implementation of jstl tag c:import ot get the answer, but wondering if u guys might already know?

Member Avatar for Jupiter 2

Create a separate HTML page as a source page that has your javasript calls.
Put the iframe into your MainPage.html

<iframe src="MySource.html" width="0" height="0" frameborder="0" scrolling="No" marginheight="0" marginwidth="0" topmargin="0" leftmargin="0">

Whatever you want to do can be implemented in the Source page (inside the iframe).

"I use Ajax to mop the floors - you heard what I sed!"

Member Avatar for ankitjain_dce

Hi Jupiter,
Thats exactly what i did and my problem is solved as well but still i wanted to understand the second part...diff btw c:import and iframe, do u know about it?

Member Avatar for Jupiter 2

This is the keyboard - Left source - from the zip file I attached earlier. I've removed most of the key letters because of its length.
It sends the clicked letter to the bottom frame. I wrote this a long time ago so it might be missing some punctuation. Early days allowed - mysource.htm - but nowadays you have to enclose them in quote marks - "mysource.htm"

You could implement the same concept. Your target window in the iframe could hold temoporary information but it will not be saved. I don't think you are allowed to do that unless you do it with cgi-bin or directly to a database on your computer or to a server, with server permission. The reason - so you can't write naughty stuff onto other peoples' computers. You will have to reference the iframe Name.

<html><head><title>Left source - Keyboard</title><META content="Jupiter 2" name=Author>
<script language=javascript>
var items = new Array(10);
var numitems = 0;
function Item(d) {
this.desc = d;
}
function additem(desc) {
items[++numitems] = new Item(desc);
displaycart();
}
function displaycart() {
var totalcost = 0;
with (parent.cart.document) {
open();
write("<html><body bgColor=ccee55 text=blue>");
write("<b><font size=4></b> ");
if (numitems == 0) {
write("<b>Select your words and spacing carefully; there is only one backspace allowed per error entry.</b>");
write("</font></b>");
write("</body></html>");
close();
return;
}
for(i=1;i<=numitems;i++) {write("" + items[i].desc);}write("</body></html>");close();
}
}
function edititem(desc) {
items[numitems] = new Item(desc);displaycart();
}
</script></HEAD>
<body onload="javascript:displaycart()" bgColor=ccee55 text=blue link=red alink=green vlink=red font size=8>
<table cellpadding=2 cellspacing=2 border=2 
bordercolor=antiwuewhite><tbody><caption><font size=4 color=brown>Typing with the Mouse 
Pointer.</font></caption><td valign=top align=center width=50><a href="javascript:additem('A');"><b>A</b></a></td><td valign=top align=center width=50><a href="javascript:additem('a');"><b>a</b></a></td><td valign=top align=center width=50><a href="javascript:additem('B');"><b>B</b></a></td>
<td colspan=5 align=center><a href="javascript:additem('1');"><b>1</b></a>&nbsp;&nbsp;<a href="javascript:additem('2');"><b>2</b></a>&nbsp;&nbsp;<a href="javascript:additem('3');"><b>3</b></td></tr></table>
<table border=2 rules=0><tr><td align=center width=120><a href=farmer.htm target=_parent><b>Reset</b></a></td><td align=center width=120><a href="javascript:edititem('');"><b>B/Space</b></a></td><td align=center width=120><a 
href="javascript:additem('  ');"><b>Space</b></a></td><td align=center width=120><a href="javascript:additem('. ');"><b>FullStop</b></a><br></td><td align=center width=120><a href="javascript:additem(', ');"><b>Comma</b></a><br></td><td align=center width=120></td></tr></table><table border=2 rules=rows><tr><th>Easy words:</th><td align=center><a href="javascript:additem('The');"><b>The</b></a>&nbsp;&nbsp;<a ref="javascript:additem('address');"><b>address</b></a>&nbsp;&nbsp;</td></tr></table></body></html>

Hope this helps. Remember, this is olden times html - all hard coded in Notepad. Probably best to use a prgram like Dreamweaver or Frontpage. i'm trying to point you in the right direction.
Hope this helps.

Member Avatar for Jupiter 2

Okay, I'm cheating now and copied this from another site.
C:import example -

<%@ taglib uri = "http://java.sun.com/jstl/core" prefix = "c"%>
<html>
<head>
<title>Use of c:import in jstl</title>
</head>
<body>
<c:import url = "JSTLImportingDate.jsp">
<c:param name = "date" value = "<h1>So Have you seen the date</h1>"/>
</c:import>
</body>
</html> 

 

<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %>
<html>
<head>
<title>This page is imported</title>
</head>
<body>
<c:import url = "Date.jsp"/>
<strong>${param.date}</strong>
</body>
</html>
Member Avatar for ankitjain_dce

Ok...we are not moving forward on the secon part much...but my original problem is solved, thanks all for involving in this.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.