Develop Reference

make HTML page's element accessible in another HTML page

I have an HTML page say main.html which has an iframe (say id="myFrame")showing child.html page. Both of these pages have a button called "Hide frame". The onclick of these buttons calls hideFrame() JS function which is declared in main.js file. The hideFrame() function just change the display of myFrame to "none".
function hideFrame(){
document.getElementById("myFrame").style.display = "none";
}
The myFrame is in main.html file so the button in main.html when calls the hideFrame() function, it works. The frame gets hidden. But the same is not working if I call the function from child.html page.
How can I access this element (myFrame) form child.html page?

you should use the main.html's window object to assign the function to. So instead of
function hideFrame(){
document.getElementById("myFrame").style.display = "none";
}
you would do something like
window.hideFrame = function(){
document.getElementById("myFrame").style.display = "none";
}
Now the function is globally scoped on main.html's window.
The child frame has it's own window object. You need access to the parent window object to call the function from child.html.
From main.html, you can call hideFrame normally on click onclick = hideFrame(), but in child.html, you should put onclick = window.parent.hideFrame()

Instead of using an iFrame, I would use jquery to load in segments of html files from other files.
If that is not possible, you could inject Javascript code into the child frame that references objects in the parent. Ex:
child:
<script>
var x;
</script>
parent:
<script>
$("#myFrame").x = function(){
functionality / reference definitions
}
</script>

It took a while to understand what you are saying. From what I understand, you want to get access to an element on the top window from inside an iframe. Here is what to get access to the parent window:
var _parent = window.parent,
_parent_dom = _parent.document;
Then to get access to an element from the parent page (in this case #myFrame):
var my_frame = _parent_dom.getElementById("myFrame");

Manipulating the html elements inside the view which is inside the src of iframe

I have an iframe inside a view and in the src of the iframe I am rendering another view. Now I want to get the data of header h2 which is having some id and is present inside the second view rendered inside the src of the iframe.
Please help me out with your ideas and suggestions

Examples to access your iframe document:
var frame = document.getElementsByTagName("iframe")[0].contentDocument; // first iframe in page
// or
var frame = window.frames["myFrame"].document; // if your frame has the name "myFrame"
// or
var frame = document.getElementById('myFrame').contentWindow.document; // if your frame has the id "myFrame"
Then you can access your H2 tag inside the iframe with:
var h2 = frame.getElementsByTagName("h2")[0];
jQuery solution:
var frame = $("selector").contents(); // where selector is "#myFrameID" or ".myFrameClass", etc...
var h2 = frame.find("h2");

How to append element to parent body from an iframe?

I have this code in the iframe.
<script type="text/javascript">
$(document).ready(function(){
$("body").append($("#ctap").html());
});
</script>
I want to append #ctap's html to parent body. How can I do that ?

Try following piece of code inside document.ready
parent.$("body").append($("#ctap").html());

If the parent body you should have something like this:
var iFrame = $('#iframe_id');
var iContent = iFrame.contents().find("#ctap").html();
$("body").append( iContent );

To be able to access the content of the host page from the iframe they must have exactly the same location (hostname and port) due to cross domain scripting restrictions.
See How to remove iframe from parent page using a function inside the iframe?

How to select a div within an iframe?

I'm trying to take the contents of a div within an iframe, delete the iframe, and display only the div. I can't figure out why this won't work- I am not sure of whether to use contentWindow or contentDocument.. Any pointers? Thanks!
I have one div with id "iframe", within that the iframe with id "embedded_article",
<script type="text/javascript">
function getContentFromIframe()
{
var parent = document.getElementById('iframe');
var child = document.getElementById('embedded_article');
var oldContent = child.contentWindow.document.innerHTML;
var newContent = child.contentWindow.document.getElementById('ec-article').innerHTML;
document.getElementById('iframe').removeChild(document.getElementById('embedded_article'));
parent.innerHTML = newContent;
}
</script>

Your example:
document.getElementById('iframe').removeChild(document.getElementById('embedded_article'));
Should look something like:
var element = frames['iframe'].document.getElementById('embedded_article');
element.parentNode.removeChild(element);
window.frames['yourFrameId'] evaluates to the window object associated with your frame. when you use document.getElementById, you want to use the document belonging to your frame's window, not the document in your main window. The rest should be self-explanitory.

to get to the div inside an iFrame you can try something like this
var div = document.getElementById("YourIFrameID").contentWindow.document.body.getElementById("YOUR_DIV_ID")

change src of iframe and then reload the iframe

I managed to change an iframe's src with javascript
var path='images/tattoo/fullsize/';
var h=$('#borderlessFrame').height();
var bigFrame=$('#borderlessFrame');
function loadGallery(num)
{
bigFrame=$('#borderlessFrame');
var galPath=path + num; // path to the image
h=$('#borderlessFrame').height();
var source=bigFrame.attr('src');
source='i load some address here';
}
But for now i see the old content of the iframe , is there a way to reload the iframe ( only iframe not the whole page)
The thing i am trying to achieve is a simple gallery , thumb pictures on the bottom and a large picture on the top ( iframe ). On click on any of the thumbs , i change the content of the iframe without reloading the actual page.
Keep in mind that i am new to html/javascript/jquery.
So basically i need a way(function?) to reload the iframe.

To set attribute, you need to call .attr( attributeName, value )
Try this:
var source='i load some address here';
bigFrame.attr('src', source);
Reference:
jQuery .attr()

jQuery has the load method, which is useable like so (assuming borderlessFrame is the id of the <iframe>):
var iFrame = $('#borderlessFrame');
iFrame.load('http://theurltoload.com')
However, iframes seem like an unnecessary approach for your requirements, consider looking into CSS and the jQuery DOM manipulation methods a little more.