Solved

innerhtml

Posted on 2004-08-31
15
3,187 Views
Last Modified: 2012-06-21
<html>
<head>
<script type="text/javascript">
function setInnerHTML( id, str )
{          document.getElementById(id).innerHTML = str;
}
</script>
</head>
<body>
<div id="divA">This Is The Original Contents</div>
<div id="divB">
          <input type="button" value="::. Click Me .::" onclick="setInnerHTML('divA','http://msn.com');">
          <input type="button" value="::. Click Me2 .::" onclick="setInnerHTML('divA'http://yahoo.com');">
          <input type="button" value="::. Click Me3 .::" onclick="setInnerHTML('divA','http://google.com');">
</div>    
</body>
</html>

in above simple code, i just need that i click on one button and see the different page in the same div,, i am missing something in javascript, can someone please correct the code ??

thanks in Advance.
0
Comment
Question by:shafiqrao
  • 5
  • 5
  • 2
  • +2
15 Comments
 
LVL 33

Expert Comment

by:sajuks
Comment Utility
<html>
<head>
<script type="text/javascript">
function setInnerHTML( id, str )
{          document.getElementById(id).innerHTML = str;
}
</script>
</head>
<body>
<div id="divA">This Is The Original Contents</div>
<div id="divB">
          <input type="button" value="::. Click Me .::" onclick="setInnerHTML('divA','http://msn.com');">
          <input type="button" value="::. Click Me2 .::" onclick="setInnerHTML('divA','http://yahoo.com');">
          <input type="button" value="::. Click Me3 .::" onclick="setInnerHTML('divA','http://google.com');">
</div>    
</body>
</html>
0
 
LVL 7

Expert Comment

by:gam3r_3xtr3m3
Comment Utility
sorry, but no, you can't place a certain HTML source from other domains on your webpage using JavaScript.

gam3r_3xtr3m3
0
 
LVL 7

Expert Comment

by:gam3r_3xtr3m3
Comment Utility
if i understood the other statement correctly, you could use iframes instead:

<iframe name="frame1"></iframe>
<a href="http://www.yahoo.com" target="frame1">Yahoo</a>
<a href="http://www.experts-exchange.com" target="frame1">EE</a>
0
 

Author Comment

by:shafiqrao
Comment Utility
any best fit option ?? i actually want my own pages like first.html second.html to be displayed in certain area, i dont want to use frames.
0
 
LVL 33

Expert Comment

by:sajuks
Comment Utility
0
 
LVL 14

Expert Comment

by:ziffgone
Comment Utility
You may have to use one iframe or a popup window for this, if you go the way of the popup, it can be popped up way off screen so as not to be seen. Here's a way with a hidden iframe:


<head>
<script type="text/javascript">
function setInnerHTML(frm,id,str)
{          
    document.getElementById(id).src = str;
    var myInner = document.getElementById(frm).document.body.innerHTML;
    document.getElementById(id).innerHTML = myInner;
}
</script>
</head>
<body>
<div id="divA">This Is The Original Contents</div>
<div id="divB">
          <input type="button" value="::. Click Me .::" onclick="setInnerHTML('hiddenFrm','divA','mypage1.htm');">
          <input type="button" value="::. Click Me2 .::" onclick="setInnerHTML('hiddenFrm','divA','mypage2.htm');">
          <input type="button" value="::. Click Me3 .::" onclick="setInnerHTML('hiddenFrm','divA','mypage3.htm');">
</div>
<iframe id="hiddenFrm" src="" style="width:1px;height:1px;border:none;"></iframe>    
</body>
</html>

Regards...
0
 

Author Comment

by:shafiqrao
Comment Utility
the example code that you proided donot show any change in contents
0
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 

Author Comment

by:shafiqrao
Comment Utility
can u please give me an example code for iframe ? i think i will go for any solution available.
0
 
LVL 14

Expert Comment

by:ziffgone
Comment Utility
No problem, sorry about that, I didn't take in several factors, here is updated code that should work:

<head>
<script type="text/javascript">
function setInnerHTML(frm,str)
{          
    document.getElementById(frm).src=str;
}
function setDiv(myInner,id)
{
    document.getElementById(id).innerHTML = myInner;
}
</script>
</head>
<body>
<div id="divA">This Is The Original Contents</div>
<div id="divB">
          <input type="button" value="::. Click Me1 .::" onclick="setInnerHTML('hiddenFrm','page1.htm');">
          <input type="button" value="::. Click Me2 .::" onclick="setInnerHTML('hiddenFrm','page2.htm');">
          <input type="button" value="::. Click Me3 .::" onclick="setInnerHTML('hiddenFrm','page3.htm');">
</div>
<iframe id="hiddenFrm" name="hiddenFrm" src="" style="position:absolute;left:-100px;width:1px;height:1px;border:none;" onload="setDiv(document.frames['hiddenFrm'].document.body.innerHTML,'divA');"></iframe>    
</body>
</html>

Regards...
0
 

Author Comment

by:shafiqrao
Comment Utility
i appriciate your help, but i cannot resolve the following line according to my needs, my mind is messed up for some personal reasons, can you please make it more specific to display the link like hotmail.com to some specific area  of window on a button click and then clicking on another button we can show yahoo.com in same are aof the screen, lets say its a div or a iframe, see http://shafiq.us i want to display different pages in the text area of the web site on menu click.

thanking you,
Shafiq.
0
 
LVL 8

Expert Comment

by:_aaron_
Comment Utility
This will work for your web page... Just make sure that you place the iframe in the correct location and all will work fine...


<script>
function fn(url)
{
   if ( url )
   {
   document.getElementById('iframe0').src = url
   }
}
</script>

<body>


<iframe id=iframe0 style='position:absolute;top=100px;left=100px'></iframe>

<select onchange=fn(this.options[this.selectedIndex].value)>
<option value=''>Select Link
<option value='http://www.yahoo.com'>Yahoo
<option value='http://www.google.com'>Google
</select>


0
 
LVL 14

Expert Comment

by:ziffgone
Comment Utility
Here you go, I have set it up with your little Navigation Select menu midway down your left navigation bar.

http://webmastereseller.com/test/shafiqrao/

You can pull the source code from there. Just remember to remove the "<base href="~">" tag located just above the </head> tag. Also, you wont need to use full path urls in the function, just direct paths such as "main.html" or "about.html".

Regards...
0
 
LVL 14

Expert Comment

by:ziffgone
Comment Utility
Also, if you want to add it to the buttons on the nav bar, simply add the function to an onclick event in each:

<a href="#" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('Image16','','images/m1r.jpg',1);" onclick="setInnerHTML('hiddenFrm','about.html');return false;"><img src="images/m1.jpg" name="Image16" width="151" height="32" border="0"></a>

I did this in the About Us button on the top of the Nav Bar for example.

Regards...
0
 

Author Comment

by:shafiqrao
Comment Utility
i dont have words to appriciate your help, but i am such a dumbass that i still cannot make it in working state for me. Is is possible that you can siaplay hotmail.com in the body area on click on About us, yahoo.com on a click on Registered Diplomas, and google.com on third button click ?.
The body area is the area that includes the picture of three students in lab and text starts from "Students in our undergraduate teacher ........... ", i.e. right side area of the left navigation buttons and under the globe.
I really really appriciate your help and that you are uploading it for testing on your domain even.

Thanks again.
0
 
LVL 14

Accepted Solution

by:
ziffgone earned 300 total points
Comment Utility
"Is is possible that you can display hotmail.com in the body area on click on About us, yahoo.com on a click on Registered Diplomas, and google.com on third button click ?." ----> No. Not these pages. This is what we've been telling you all along. You will not be able to display them in the body area using the method we have been, you will receive an "Access Denied" error message when trying to get the innerHTML from these pages, which are not hosted on your domain.

I can do it for your own pages that are located on your own webspace at geocities, such as the ones I used in example on my page, "about.html","contact.html" "main.html" etc. I will give you an example of what I mean.

Go back to my page:
http://webmastereseller.com/test/shafiqrao/

Now, I have placed links in the top few buttons, the "ABout Us" button links to "about.html", hosted on my server, the "Registered Diplomas" button links to "main.html" hosted on my site. The "Career Tracks" button links to "contact.html" on my server, the "Professional Exams" links to "links.html" on my server, and finally, the "Performance Developement Center" button links to "google.com", hosted on google's server.

Click each link and watch the results.

If you want to be able to show pages hosted on a different domain, you will have to go with a solution like aaron's above, using an iframe where you want the body content. For example, this page uses an iframe in the main content area:
http://webmastereseller.com/test/shafiqrao/2/

I hope that I have been clear for you, you can not access the innerHTML from any page that is NOT hosted on the same server as your pages, meaning, if it's not located in a folder on your webspace, you are denied access to it's innerHTML. But...as my first page example shows you, if the pages are hosted on your server, then there is no problem accessing their innerHTML and applying it to the current page.

Hope that helps.

Regards...
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now