I have a frameset that has 3 frames:
<frameset rows="124, *, 0">
<frame id="f1" scrolling="No" frameborder="0" src="" name="control">
<frame id="f2" frameborder="0" src="" name="main">
<frame id="f3" noresize frameborder="0" name="go">
</frameset>
I'm going to check if frame with id = "f2" exist?
I have tried :
<script>
if( document.getElementById("f2").contentDocument.documentElement.innerHTML !== null) {
alert('ok');
}
</script>
But not worked.
I know i should do something like:
document.getElementById("f2")
but need more info
Well - actually what you should do is only check if document.getElementById("f2") return something, however in order for this to work you must set the doctype of your document to frameset:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Otherwise the browser will not recognize the frame, and it will return nothing.
Check this fiddle:
https://jsfiddle.net/b8xg9y8u/
document.getElementById() returns null if the element doesn't exist, so the expression will be false, either add ! at the begining, or add your code in the else case
if (!document.getElementById("f2")) {
}
or
if (document.getElementById("f2")) {
} else {
}
Related
I have an website with an ajax form, and i want to get the inner text of a specific element inside that form.
The element doesn't exist when the page is first loaded.
I'm building a chrome extension to get that innertext value and print it to the console.
As i'm very new to JS, i just made the following code:
document.addEventListener('click', function () {
let text = document.querySelector("#\\39 8");
if (text !== null) {
console.log(text.innerText)
} else {
console.log('Nothing')
}
})
So i'm randomly clicking the webpage getting "Nothing"s, and expecting that when the element gets loaded i'll eventually get the innerText.
Problem is, as soon as i make the login into the webpage, i have nothing on the console. No "Nothing"s, no innerText..
My manifest includes all urls
{
"name":"Teste",
"version": "1.0",
"description": "Testing",
"manifest_version": 2,
"permissions":["storage"],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["background.js"]
}]
}
Question is, what am i doing wrong? Shouldn't be expectable to have the innerText of that element being printed to the console?
EDIT:
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr"><head></head>
<frameset rows="82,*,0,0" framespacing="0" frameborder="0" id="FS"></frameset>
<frame name="Display" scrolling="no" piweb_src="action=../screen/display.html"></frame>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<body class="screenDisplay"></body>
<iframe name="MrcSessionA" id="MrcSessionA" frameborder="0" scrolling="no" style="display: inline;"></iframe>
#document
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<frameset id="Working" cols="*,800" border="2" bordercolor="#CCCCCC" framespacing="2" style="width: auto;"></frameset>
<frameset rows="70,*" framespacing="0" frameborder="0" style="width: auto;">
<frame name="EmulatorScreenMrcSessionA" id="EmulatorScreenMrcSessionA" scrolling="no" piweb_src="action=../applications/as400/emulator/help.html?IdentTab=MrcSessionA">
<html>
<body id="EmulatorBody">
<div id="DivBody" style="height: 488px;">
<form action="" name="PiTnForm" id="PiTnForm" method="post" onsubmit="return false;" autocomplete="off"></form>
<table id="emulatorTable" class="Ps80" style="border-collapse: separate;"></table>
<tbody id="AllPsRows">
<tr onclick="SelectOptionLine('')">
<td colspan = "17">
<input type="text" name="NewV" id="602" onfocus="GeneFocusOn(this);setCharShiftFocus({target:this});" onblur="GeneFocusOff(this)" onmouseup="GeneGetCPInputKey(this, event,true)" onkeyup="GenePsAutoTab(this,'17',event);setCharShiftFocus({target:this});" style="color:black; " maxlength="17" fa="U u " colour="G u " autotab="true" class="">
This is the tree of elements that i have. I'm trying to access the last row, the input textbox.
What is the jQuery selector I need to access username from within main.html? The alert should say "Bob".
main.html
<head>
<script>
alert(username); // *** not working ***
</script>
</head>
<frameset>
<frame name="left" src="left.html">
<frameset>
<frame name="top" src="top.html">
<frame name="right" src="right.html">
</frameset>
</frameset>
right.html
<head>
<script>
var username = 'Bob';
</script>
</head>
Use the contentWindow property.
Example:
document.getElementById('frame_id').contentWindow.$('#' + idOfElementInFrame);
Note: this works for iframe tags. It should work for frame tags as well, but given that the frame tag is deprecated, you could have issues.
There is an example:
(1)mainpage:
<html>
<script>
function show(){
var winleft = window.frames["left"];
alert(winleft.username);
}
</script>
<frameset cols="25%,50%,25%">
<frame src="left.html" name="left">
<frame src="left.html" name="middle">
<frame src="left.html" name="right">
</frameset>
</html>
(2)left.html
<head>
<script>
var username = 'Bob';
</script>
</head>
(3)why?
Every frame has its own Object "window",
you should get the "window" object of the frame["left"],and the variable "username" is the proterty of the frame["left"]'s window(winleft) object.so,you can get the value of username.
I was testing my website on http://mobiletest.me
when i got an Error:
InvalidAccessError: A parameter or an operation is not supported by
the underlying object
My website contains multiple frames and framesets.
They`re built like this
<frameset rows="100px,30px,*,5%">
<frame src="topbar.php">
<frame src="toolbar.php" name="navigation">
<frameset cols="25%,40%,*%">
<frame src="content.html" name="content">
<frame src="content.html" name="content2">
<frame src="content.html" name="content3">
</frameset>
<frame src="endbar.php" name="endbar">
</frameset>
and I have a function clear() which sets the content of some frames to default:
function clear() {
parent.content.location = "content.html";
parent.content2.location = "content.html";
parent.content3.location = "content.html";
}
The Error appears on this line:
parent.content.location = "content.html";
Edit: and every other time when i try to access a frame form another frame
Note: pls no commands like "you should not use frames" They dont help...
Assuming this html:
<frame name="content">
Your js code will be:
parent.content.src = "content.html";
The key is src attribute.
My onclick opens a page called index.html. My site has frames and I want to set the target frame. my function is in FRAME id="preview" and i want to load index.html in FRAME id="bu"
onclick : function() {
// Add you own code to execute something on click
window.location = 'index.html';
}
-
<FRAMESET id="frameset" rows="95,*" cols="*">
<FRAME noresize="" id="tool" name="tool" src="Application/tool/<?=$id ?>">
<FRAMESET COLS="81%,*">
<FRAME id="preview" name="preview" src="<?=$preview_url ?>" onload="bu.setPreviewEvents()" >
<frameset id="tcolor" rows="60,*" cols="*">
<FRAME id="colorfr" name="colorfr" scrolling="no" src="<?=$colorfr_url ?>" >
<FRAME id="bu" name="bur" src="<?=$bu_url ?>" >
</frameset>
</FRAMESET>
</FRAMESET>
You can access the main window from any frame using top. To refer a specific frame element, you can use its name, or frames collection of the main window:
window.top.frames['bur'].location.href = 'index.html';
Notice, that frames collection contains the window objects within frame elements, not frame elements.
Can you tell me how we can change a frame size on mouse over?
eg:
<html>
<frameset rows="70%,30%">
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>
</html>
On mouse over it should become like this:
<frameset rows="40%,60%">
And also is there any way we can do like this?
<frameset rows="40%,60%"> ---> <frameset rows="70%,30%"> ---> <frameset rows="40%,60%">
(after loading webpage; (after 5 seconds) (on mouse over)
for 5 seconds)
CODE:
<html>
<head>
<script>
var already=false;
var frameset;
window.onload=function(){frameset=document.getElementById("foo");};
setTimeout(modify,5000);
function modify()
{
already=true;
frameset.setAttribute("rows","70%,30%");
}
function big()
{
if(already)frameset.setAttribute("rows","70%,30%");
}
function small()
{
if(already)frameset.setAttribute("rows","40%,60%");
}
</script>
</head>
<frameset rows="40%,60%" id="foo" >
<frame src="page1.htm">
<frame src="page2.htm" onmouseover="small();" onmouseout="big();">
</frameset>
</html>
You can use JQUERY to change frame Size. there is a effect Animation already defined in it.
Its very easy to do with it.