In this case i have two HTML page (just let say two)
named index.html and list.html
index.html
<html>
<head>
<title>Frame</title>
</head>
<frameset rows="20%,80%" bordercolor='blue' noresize id="judul">
<frame src="Judul.html" id="atas">
<frameset cols="15%,85%" id="kolom">
<frame src="list.html" id="daftar">
<frame src="new 2.html" id="tengah">
</frameset>
</frameset>
</html>
list.html
<html>
<head>
<title>List</title>
</head>
<body>
Main page
About Us
</body>
</html>
So what i want is when the link from list.html call the page the targetted frame will show a loading GIF and then hide it when the load complete.
And the question is what code should i put there ? and where should i put it ?
and please make it as detail as possible,since i'm very new to HTML and it's stuff
and thanks for all suggestion
The best way is still CSS or Jquery since framesets are deprecated anyway...
Example CSS, using the :hover modifier (assuming you have onhover trigger function):
.myloading_gif {
display: none:
}
.myloading_gif:hover {
display: block:
}
If its a click element you cannot solve it with CSS, then you should consider JQuery:
$("#myHrefID").click(function() {
$("#myLoadingIcon").toggle();
});
And when the loading is finished just call "toggle" again.
$("#myLoadingIcon").toggle();
There are many ways to achieve this. My examples just should be just a little help since I am not 100% sure that I got your point.
Related
I am trying to present a new feature on a website already in production. Therefore, I am loading this website using an iframe into my development server as follows:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<iframe id="myframe" src="https://production_website.com" style="border:none;" width="100%" height="600" seamless></iframe>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
console.log($("#myframe").contents());
$("#myframe").contents().find(".importantContent").click(function(){
console.log($(this));
});
</script>
</html>
I am trying to intercept user clicks on a specific DOM element in the iframe zone, based on that I'll be injecting a specific HTML content to demonstrate a feature. But listening with jquery click() is not working.
Any suggestions on what to do?
I am aware of the same origin policy restriction, but for a web designer/developer who doesn't have control over the server, aren't there workarounds like disabling the restriction using a pluging?
example: https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/
I found this answer in another thread, and it looks like it may work on your end. Try:
$('#myframe').load(function(){
var iframe = $('#myframe').contents();
iframe.find(".importantContent").click(function(){
alert("test");
});
});
Also, you have $("#reco").contents() instead of $("#myframe").contents(), were you meaning to not use the iframe you have in this example?
Usually we put our JavaScript <script> tags at the bottom of an HTML document, right before the closing </body> tag, with the benefit that they are executed after all the elements are already available in the DOM and some more things.
However, I'm using a frame document1 which does have a <frameset> instead of a <body> tag. I don't want to put them in the <head> of the document because they wouldn't have immediate access the DOM elements below3. And I don't want to use <iframe>s in a standard body tag either4. I've tried
<head>
<title>Framesets are interesting</title>
</head>
<frameset cols="50%,50%">
<frame id="frame-a" src="a.html">
<frame id="frame-b" src="b.html">
<script type="text/javascript">
console.log("hello world!");
console.log(document.getElementById("frame-a")); // this is what I'm after
</script>
</frameset>
However, the script was not executed at all, it didn't even show up in the DOM inspector. Sure, a <frameset> may only contain <frame> and <noframes> tags. But, is there really no way to get scripts execute after a <frame> tag?
Just for reference, placing them after </frameset> like it's sometimes done with <body>s doesn't work either.
1: Yes, I know they're deprecated. They were just the natural choice2 for my project, a neat side-by-side view that shows two documents and scrolls them together in a sophisticated manner.
2: …and I never used them before, so I wanted to give it a try.
3: That is what I ended up with, after all an onload handler is trivial. Still the question remains, I'm curious.
4: works fine, but requires intricate CSS styling
A <script> element can only appear in either a <head> element or <body> element. It cannot appear as a child of a <frameset> element; a <frameset> can only contain <frame> elements, <noframes> elements, or other <frameset> elements. See the Transitional DTD:
<!ELEMENT FRAMESET - - ((FRAMESET|FRAME)+ & NOFRAMES?) -- window subdivision-->
Normally, browsers are happy to insert elements into other elements where they don't belong in complete defiance of what the DTD says since the DTD is just a rulebook, but this doesn't always happen (for example, you can never put any other flow element into an HTMLParagraphElement no matter how hard you try), so if a browser is refusing to place an HTMLScriptElement in an HTMLFrameSetElement, chances are this is why.
Any workarounds will involve placing a <script> element in either the frameset's <head> element, or within one of the frames. (You can also place a <script> element within a <noframes> element since <noframes> has the same content model as <body>, but this won't solve your problem for obvious reasons.)
Similar problem was solved here: Dynamically set frame src using javascript
<head>
<title>Framesets are interesting</title>
<script type="text/javascript">
function LoadPage(){
console.log("hello world!");
console.log(document.getElementById("frame-a")); // this is what I'm after
}
</script>
</head>
<frameset cols="50%,50%" onload="LoadPage();">
<frame id="frame-a" src="a.html">
<frame id="frame-b" src="b.html">
</frameset>
You can put the script by inserting a frame with a data URI:
<head>
<title>Framesets are interesting</title>
</head>
<frameset cols="50%,50%">
<frame id="frame-a" src="a.html">
<frame id="frame-b" src="b.html">
<frame src="data:text/html,<script type='text/javascript'>with(parent) {
console.log('hello world!');
console.log(document.getElementById('frame-a'));
}</script>">
</frameset>
Of course, you will need to be careful with quotes, and the script will run in another realm. You can use parent or top to access the window of the outer document.
For a frameset, i want to open a link from page of A frame by using onmouseover and open it in another B frame? when mouseover the link from A frame, it will open the page on B frame. Give a hint.
When I worked with <frame> it has taking a long time ago (seven or more years).
Because you didn't post any html sourcode :-|, I created a theoretical situation:
<html>
<head>
<script type="text/javascript">
function nullRand () {
//document.getElementById("frameBid").src = "myNewInternalPage.html";
document.getElementById("frameBid").src = document.getElementById("frameAid").src;
}
</script>
</head>
<frameset cols="25,*" frameborder="no" border="0" framespacing="0" framepadding="0">
<frame id="frameAid" name="frameAname" src="myHtmlFile.html" noresize>
<frame id="frameBid" name="frameBname" src="" noresize>
</frameset>
</html>
SIn my theoretical file 'myNewInternalPage.html' you have to instert the method call
An link
Note: frame is not approiate to show external content. That's why iframe exists.
Update:
After a hard fight with the OP I got something to my hands. Here is a solution:
1st: Replace the old Javascript code from 'nullRand()' with the new one
function nullRand (linkObject)
{
document.getElementById("frameBid").src = linkObject.href; // The new way to access to a frame
//top.frames["center"]..src = linkObject.href; <-- The old way to access to a frame */
}
2nd: Modyfiy the a tag -where the radio streams are listed- as follow:
...
So it should work. In my eyes you should think about a new concept for your task.
Hello guys
I'm creating a little website for my Javascript course. I created a page with 3 frames as above in the image.
I don't know if it is possible to do that but what I want to do is:
When the visitor clicks on "PAGE A" from the FRAME MENU, the text "TEXT TITLE" in the FRAME HEADER is changed to "WELCOME TO A", or when he clicks "PAGE B", the text "TEXT TITLE" is changed to "WELCOME TO B".
I know it's possible to load two pages by one click and therefore you could say why not load another page in the frame header, but it's not what I want to do.
Is it possible to do that by any means in javascript?
Thanks
Well, first suggestion - don't use frames. It is very easy to include pages into each other, so just write little components like menu.html, top.html, mainpage.html and include those into your pages.
This makes page management much easier - you reuse the code and can make the pages from those little components.
Then when you click on the link you would just go to the page that has manu included, in the top you include the appropriate title and the main page.
If you use some server-side language you could pass the title of the header as a parameter.
If you really want to go with frames you would need to do something like this:
Main page with frames:
<html>
<head>
<title>Frames Example 5</title>
</head>
<frameset cols="20%,80%">
<frame src="page1.htm" name="left_frame">
<frame src="page2.htm" name="right_frame">
</frameset>
</html>
Page, that changes links:
<html>
<head>
<title>frame 10</title>
<script language="JavaScript" type="text/javascript">
<!--
function change()
{
parent.left_frame.location="page3.htm";
parent.right_frame.location="page4.htm";
}
//-->
</script>
</head>
<body bgcolor="#ffffff" text="#000000">
<center>
Click the link below to change both frames.
<br />
change 2 frames
</center>
</body>
</html>
so, in your menu add this javascript and change the links and reference your frames.
I have a old fashion page that uses a frameset containing a top frame and bottom frame. The frameset is defined in "index.html" and my code is as follows:
<html>
<head>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('#mainFrame').ready(function() {
$('#mainFrame a').live('click', function() {
alert('u click');
return false;
});
});
});
</script>
</head>
<frameset id="main" rows="125,*" cols="*">
<frame src="header.html" name="headerFrame" id="headerFrame" />
<frame src="main.html" name="mainFrame" id="mainFrame" />
</frameset>
</html>
I would like to be able to intercept links that are clicked on the frame "mainFrame". I thought I could just add a ready event for it then live bind click events but it doesn't work. Any ideas?
Note: The files are all on the same domain so this is not an XSS issue.
<script>
$(document).ready(function(){
$('#mainFrame').ready(function() {
var f = document.getElementById('mainFrame').contentWindow.document;
$('a', f).live('click', function() {
alert('u click');
return false;
});
});
});
</script>
You just need to add a context to jQuery statement, to tell it where to look for #mainFrame a
Oh yeah....you definitely need to make sure that the iframe is loaded. The "live" should take care of that...but I'm working on something now where I had to write a custom ready() plugin for jQuery to make sure my frames were loaded, because I was having trouble with Chrome.
Chrome and IE seem to jump the gun on with the document.addEventListener("DOMContentLoaded"... which I believe is what the ready() functions in jQuery use.
Anyways, just make sure that your iframes get loaded all the way.