All geek questions in one place

GetElementById in Three Ways

I have an application that should get a value from a field of a hidden input form. However, this application has a base page that calls another page that is in an iFrame, and then it can also call itself inside another iFrame:

default.asp -> screen.asp (in iFrame) screen.asp -> a new instance of screen.asp (in iFrame)

document.getElementById('focusValue').value window.frames[0].document.getElementById('focusValue').value parent.frames[arrVal].document.getElementById('focusValue').value

When I reference the default hidden form field → - I can use the standard document.getElementById('focusValue').value; . Then, when I'm on the 1st level of iFrame, I have to use window.frames[0].document.getElementById('focusValue').value; . Then when I'm at level 2+ in iFrame, I have to use parent.frames[arrVal].document.getElementById('focusValue').value; .

The general structure I'm starting to see is this:

 if(document.getElementById('focusValue') == undefined){ window.frames[0].document.getElementById('focusValue').value = focusValue; console.log('1'); }else if((parent.frames.length -1) == arrVal){ console.log('2'); if (arrVal > 0) { parent.frames[arrVal].document.getElementById('focusValue').value = focusValue; } }else{ document.getElementById('focusValue').value = focusValue; console.log('3'); }

Now I can do it, but outside of writing new comments. I am interested in other programmers (or me in a month) who look at this code and wonder what I'm doing.

My question is, is there a way to achieve what I want to do in standard form? I really hope that there is a better way to achieve this.

+4
source share
3 answers

I would suggest that each page searches for the desired value by calling a method. Basically exposing the search interface. Then you only need to call the method on the landing page from the parent page. Proper naming will help developers understand what is happening, and using methods will simplify the logic.

Or, if you only need to get the value from the parent page, you can register the hook with each page in an iframe using a common interface. Each page can simply call this hook to get the value. This prevents the complex logic of determining page level. Sort of

 iframe1.GetValueHook = this.GetValue; iframe2.GetValueHook = this.GetValue;

Then each page can simply call

 var x = this.GetValueHook();

If you have subpages, you can make it recursive. If you need a link between all pages, use the same approach, but with the registration process. Each page registers itself (and these are children) with its parent. But if you need to do this, you must reevaluate your architecture.

Example: register.js

 var __FRAMENAME = "Frame1"; var __FIELDID = "fieldId"; var __frames = []; function RegisterFrame(frame) { __frames.push(frame); for (var i = 0; i < frame.children.length; i++) { __frames.push(frame.children[i]); } RegisterWithParent(); } function RegisterWithParent() { var reg = { name: __FRAMENAME, getvalue: GetFieldValue, children: __frames }; if(parent != undefined && parent != this) { parent.RegisterFrame(reg); } } function SetupFrame(name, fieldId) { __FRAMENAME = name; __FIELDID = fieldId; RegisterWithParent(); } function GetFieldValue() { return document.getElementById(__FIELDID).value; } function GetValueFrom(name) { for (var i = 0; i < __frames.length; i++) { if (__frames[i].name == name) { return __frames[i].getvalue(); } } }

index.html

 <html> <head> <script language="javascript" type="text/javascript" src="register.js"></script> </head> <body> PAGE <input type="hidden" id="hid123" value="123" /> <iframe id="frame1" src="frame1.html"></iframe> <iframe id="frame2" src="frame2.html"></iframe> <script type="text/javascript"> SetupFrame("Index", "hid123"); setTimeout(function () { //Only here for demonstration. Make sure the pages are registred alert(GetValueFrom("frame3")); }, 2000); </script> </body></html>

frame1.html

 <html> <head> <script language="javascript" type="text/javascript" src="register.js"></script> </head> <body> <input type="hidden" id="hid" value="eterert" /> <script type="text/javascript"> SetupFrame("frame1", "hid"); </script> </body></html>

frame2.html

 <html> <head> <script language="javascript" type="text/javascript" src="register.js"></script> </head> <body> <input type="hidden" id="hid456" value="sdfsdf" /> <iframe id="frame2" src="frame3.html"></iframe> <script type="text/javascript"> SetupFrame("frame2", "hid456"); </script> </body></html>

frame3.html

 <html> <head> <script language="javascript" type="text/javascript" src="register.js"></script> </head> <body> <input type="hidden" id="hid999" value="bnmbnmbnm" /> <script type="text/javascript"> SetupFrame("frame3", "hid999"); </script> </body></html>

It would be better if you could change it to use a dictionary / hash table instead of loops.

+1
source

It is best to establish the correct name names so that they themselves document. Something like that...

 var screenFrame = window.frames[0]; var screenFrame2 = parent.frames[arrVal]; var value = screenFrame2.document.getElementById('focusValue').value

This will make reading easier.

+1
source

If you really have to look for frames for a given element, then you just have to make your own function for this and use this function everywhere. Put a lot of comments in a function explaining why / what you are doing and give the function a meaningful name, so future programmers will be more obvious by looking at your code, what you are doing, or where they can look to find what you are doing.

 function setValueByIdFrames(name) { if(document.getElementById(name) == undefined){ window.frames[0].document.getElementById(name).value = name; console.log('1'); } else if((parent.frames.length -1) == arrVal){ console.log('2'); if (arrVal > 0) { parent.frames[arrVal].document.getElementById(name).value = name; } } else { document.getElementById(name).value = name; console.log('3'); } }
0
source

Source: https://habr.com/ru/post/1381179/

More articles:


All Articles