shhac
Expert Cheater
![]() Reputation: 0
Joined: 30 Oct 2007
Posts: 108
|
 Posted: Mon May 11, 2009 4:05 pm Post subject: [JS Tut] Editing iframes and partial id checking |
 |
|
This is a tutorial.
IFRAME EDITING
Important note: On most browsers, for security reasons, the iframe must be to the same domain to edit it.
To do the following, I always use firebug, but any kind of javascript injection method should work.
Okay, so first you have to either insert your iframe or use an iframe that is already in the document. Personally I always make my own ones based around the following code:
| Code: | | document.body.innerHTML = '<iframe id="page" src=""></iframe>'; |
Note the id I used here is page, so you can follow the next step more easily to follow.
You can add any other attributes you like or fill in the src attribute. It doesn't matter where it points to as long as its on the same domain.
Next, I set up the variables I need. I do this here because if I am looping a function, I find it easier to follow if it has less things in it. Also, some things don't need to be declared multiple times so doing so wastes time.
Fully define anything that won't change later here too. You only need to define this once per iframe that you want to edit - not once per function, and make sure that these are above where you first use them.
| Code: | var ifrm = document.getElementById('page'),
doc = null; |
Okay now the variables are out of the way, we need to define a function that will actually edit the iframe.
| Code: | function editFrame(){
doc = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;
doc.document.body.innerHTML = 'Hello world!'
doc = null;
} |
Note the first line defines doc. This is because if the page changes, the previous doc will stop working properly, but ifrm is still the same element so it's not necessary to redefine that.
Why did I use doc.document? That's because FF has (ifrm.contentWindow) so you still have to use document. If you're on another browser and this isn't working, try without the extra document
Also note that doc is set back to null at the end. This is to minimise memory leaks (but they will probably still happen).
Wasn't that easy!? I'll come back to iframes and explain how to add functions to be run inside them after talking about the partial id checking as this will give an example of real use.
PARITAL ID CHECKING
This will just be line(s) of code followed by an explanation of why its there.
| Code: | | document.getElementByPartialId = function(id) { |
This is a way of declaring a function as a child of document. I've used this method so it is easier to follow later. The function is called getElementByPartialId and its input is called id.
| Code: | | id=id.replace(/\|/g,'\\|').replace(/\[/g,'\\[').replace(/\(/g,'\\(').replace(/\+/g,'\\+').replace(/\./g,'\\.').replace(/\*/g,'\\*').replace(/\?/g,'\\?').replace(/\//g,'\\/'); |
This line makes the id "RegExp Safe". Not doing this can result in wrong results if you've got a strange id you're looking for.
| Code: | | var allElms = document.getElementsByTagName('*'), |
This gets all elements in the document. You use document.all in some browsers. FF doesn't support it so I use the * wildcard.
| Code: | | re=new RegExp(id,'g'), |
Create the regular expression to check the ids against. The g flag means global. There are other flags you can use too e.g. i to ignore case.
Define other variables we're going to use.
| Code: | | while((elm=allElms.item(i++))){ |
This is basically a for each loop.
| Code: | | if(re.test(elm.id||'')){ |
The actual test. The || is the logical OR operator. We use this in case elm.id is undefined so that we don't get any errors at this step.
If we've found a match, return that element. Note: This will stop the loop, if you want to find more than one just make an empty array in the variables and add each result to it.
| Code: | }
}
return undefined;
} |
Closing brackets. The return here is what happens if nothing was found.
BACK TO IFRAMES
Okay this is just the getElementByPartialId re-written in such a way that it can be executed inside an iframe.
Note: The function has to be redefined each time you change the iframes page.
| Code: | function addFunction(){
doc = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;
doc.document.getElementByPartialId = function(id) {
id=id.replace(/\|/g,'\\|').replace(/\[/g,'\\[').replace(/\(/g,'\\(').replace(/\+/g,'\\+').replace(/\./g,'\\.').replace(/\*/g,'\\*').replace(/\?/g,'\\?').replace(/\//g,'\\/');
var allElms = doc.document.getElementsByTagName('*'),
re=new RegExp(id,'g'),
i=0,
elm;
while((elm=allElms.item(i++))){
if(re.test(elm.id||'')){
return elm;
}
}
return undefined;
}
doc = null;
} |
Notice how everywhere that document appeared previously, it is now doc.document, and that the function we want to add is inside another function that adds it.
Note: I did not redefine ifrm or doc as vars because that is still there from above.
End.
|
|
FAQ
Search
Memberlist
Usergroups
Register
Profile
Log in to check your private messages
Log in
