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.
Related
Chrome v75 appears to have introduced a bug whereby if you replace an iFrame's src programatically, it will replace the entire page instead of the iFrame.
This didn't happen on v74 and I can't get a test case to work (yet), it just fails in our site. (The site hasn't changed since going from v74 to v75, only Chrome has changed)
It appears to work fine the first time but then when you change it again (in our case viewing report drill downs) it causes the entire page (i.e. the iFrame's Parent) to load the src you were trying to load into the iFrame.
It also doesn't matter if you use pure Javascript or (in our case) JQuery, both cause the same issue.
EDIT: After a few hours detective work, I've found the bug. Setting the tag in the iFrame's content causes Chrome to load the iFrame's content into it's parent rather than the iFrame itself.
I've setup a Plunker account with a demo: https://plnkr.co/edit/UQ0gBY?plnkr=legacy&p=info
Just so I can post the link to Plunker, here is the code for the main file & the iframe content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function onLoaded() {
// find element
let button = document.getElementById("button");
button.addEventListener("click",function(e){
// Add a random number on the end as a cache buster
document.getElementById('frame-finance-custom').src = 'test2.html?rnd=' + Math.random();
},false);
};
document.addEventListener('DOMContentLoaded', onLoaded, false);
</script>
</head>
<body>
<div>IFrame Src Changing Test</div>
<div>
<div id="div-frame-finance-custom" style="float:left;width:33%">
<iframe id="frame-finance-custom" name="frame-finance-custom" class="iframe"
style="border:1px solid black; width: 100%; height: 350px; overflow-y: scroll; vertical-align: top;">
no data
</iframe>
</div>
<div style="float:left;margin-left:1em;">
Detail: Loading an iframe page with a <Base> tag in it with target set to "_parent" will cause any refresh of that frame to replace the parent document<BR>
<BR>Instruction: <UL><LI>Click the 'Update Frame' Button, this will load test2.html into the frame. <LI>Click it again & it will replace the iframe's parent with the content of the iFrame.</UL>
<BR>Confirmation: Remove the <Base> tag from the header of test2.html & reload, it will work as expected.
</div>
</div>
<br clear=both>
<div>
<button id="button">
Update Frame
</button>
</div>
</body>
</html>
IFrame Content (test2.html):
<!DOCTYPE html>
<html lang="en">
<head>
<base target="_parent"/>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>This is the frame content</div>
</body>
</html>
Note, using their new layout it doesn't work, but using their legacy layout it does. Feel free to save the files locally and use chrome directly too.
Ok, so this turned out to be a bug in Chrome rather than anything else, so yes, strictly not a SO question, but seeing as SO ranks so well in Google (other search engines are available), I thought it better to leave it here as a solution rather than simply delete it, just incase anyone else has a similar problem.
The reason is outlined as an edit in my question, the solution is to remove the <base target="_parent"> tag from the iFrame and programatically add the 'target="_parent"' attribute to any links in the iFrame.
We do this via jQuery, I'm sure its just as easy via vanilla Javascript.
$('a').attr('target','_parent');
Add that to the javascript that runs when a page has loaded and it'll replace add target="_parent" to any links on the page.
e.g.
<script>
function onLoaded() {
// find all links and add the target attribute
$('a').attr('target','_parent');
};
document.addEventListener('DOMContentLoaded', onLoaded, false);
</script>
As #Kaiido says in his comment, its apparently fixed in Chrome v77, but this isn't the current (as of June 2019) stable release, so we've had to add the workaround into production so that our CRM works with Chrome v75. Thanks to #Kaiido for confirming that.
Before anyone asks why I'm using frames: At my job, I need to test a website that uses frames. I am experimenting with using Javascript to get some information from a frame, and I am having trouble getting frames to work, period.
First, just to experiment, I created a file on my machine, test.html. It loads two frames: the left one containing another test page I wrote (test2.html), and the right frame containing some web page.
<html>
<FRAMESET cols="20%, 80%">
<FRAME name="leftFrame" src="test2.html">
<FRAME name="rightFrame" src="http://www.foxnews.com/">
</FRAMESET>
</html>
This is my other test page, test2.html. It simply has a button which, when clicked, alerts you with the length of window.frames. From what I've found online, that should tell me the number of frames there are. Problem is, the result is zero.
<html>
<head>
<script type="text/javascript">
function doSomething() {
alert(window.frames.length);
}
</script>
</head>
<body>
<button type="button" onclick="doSomething();">
Click me
</button>
</body>
</html>
How do you access a frame in JavaScript? I don't suppose this is issue comes from the fact that one of the frames points to a local file?
The window object doesn't refer to the entire browser window, but the logical window where the document object livs. The frameset, and each frame, has it's own window and document objects.
The window where the code is doesn't have any frames, you need to look at the parent window, where the frameset is:
alert(window.parent.frames.length);
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.
I want to autofill textboxes on another website so I'm writing a short script to do this. I'm loading an iframe with a website in it and if this iframe is loaded, it should fill in the input text forms. So I wrote this in autofill.php:
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="fill.js"></script>
<iframe name="autofillframe" src="https://e-services.blum.com/main/" style="width:100%; height:100%;"></iframe>
And this I wrote in fill.js:
$(document).ready(function(e) {
$('#username').val('username');
$('#kennwort').val('password');
});
Here is a fiddle
If I do it with a .php file instead of a website, it works fine.
Here's a demo without website
Can someone give me a hint?
When you load a page from a different domain into an iframe, you can't do anything to the iframe page from JavaScript in your page.
As far as the browser is concerned, the iframe is a separate window and you have no access to it. Imagine that the user had a banking page open in one window and your page open in another window. You know that the browser would not let your JavaScript code interfere with the banking page, right?
The same thing applies when the other page is in an iframe. It's still a completely separate browser window, it's just positioned so it looks like it's inside your page.
In your working example, the code works because the username and password fields are not in an iframe from a different domain. They are part of the same page that the JavaScript code is in.
If the iframe is loaded from the same domain as your main page, then you can do anything you want to it, including filling in form fields. The code would be slightly different because you need to access the iframe document instead of the main page document, but that's easy. But if the iframe is from a different domain, you are out of luck.
By pressing submit button , input value copies from input textbox to iframe textbox (or opposit of it).
you can implement it like:
test1.html
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#submit').click(function(){
var iframe = document.getElementById('myiframe');
var doc = iframe.contentDocument || iframe.contentWindow.document;
var elem = document.getElementById('username');
doc.getElementsByName('user')[0].value = elem.value;
});
});
</script>
</head>
<body>
<input type="text" id="username">
<input type="submit" id="submit">
<iframe id="myiframe" frameborder="1" src="test2.html"></iframe>
</body>
</html>
And test2.html :
<!DOCTYPE html>
<html>
<body>
<input type="text" name="user" id="user">
</body>
</html>
<html>
<title>iframe_test</title>
<head>
</head>
<body>
<iframe src="test_page_with_links.html" width="whatever" height="whatever" /></iframe>
</body>
</html>
I'm trying to figure out a way to make an iframe people can add to their own websites that adds additional navigation links, but if I try to change the window.top.location from within the iframe to let's say /profile, the browser goes to my website that's housing the iframe /profile instead of the website the iframe is on /profile — hope this makes sense
add target="_top" to your links
give your iframe a name and the link a target that matches the name.
<iframe src="whatever.html" name="my_frame">
<a href="http://www.somewhere.com" target="my_frame">