Changing the content of an html object using JavaScript_问答_开发者

Changing the content of an html object using JavaScript

开发者 https://www.devze.com 2023-02-13 00:41 出处：网络

I have looked high and low for the correct syntax for changing the content of an object using JavaScript and have yet开发者_运维技巧 to find anything.

相关专题：javascript

I have looked high and low for the correct syntax for changing the content of an object using JavaScript and have yet开发者_运维技巧 to find anything.

How would I go about opening a html within an object using JavaScript?

If anyone can help that would be great thanks.

To show another page within an element using Javascript you'd have to create an iFrame, as such:

<div id='test'></div>

<script type='text/javascript'>
window.onload = function()
{
    var src = 'http://www.google.com';
    document.getElementById('test').innerHTML = '<iframe src="'+src+'" />';
}
</script>

With Jquery you can rest assure that it will work correctly in all modern and not so modern browsers: http://api.jquery.com/html/

<div class="demo-container"><div class="demo-box">Demonstration Box</div></div>

$('div.demo-container').html('<p>All new content. <em>You bet!</em></p>');

Use the innerHTML property.

Plenty of information on Google: http://www.tizag.com/javascriptT/javascript-innerHTML.php

Ok, for a new page you have to do something like

<script>
function OpenUrl(value)
{
      document.all.myFrame.src=value;
      document.all.myFrame.style.visibility="visible";
}
</script>

Then inside the HTML:

      <body>
      ...
            <iframe  id="myFrame" style="visibility:hidden;"></iframe>
      ...
      </body>

Then have an element which triggers the function, like a button or image:

<input  type="button" value="Load" onclick="return OpenUrl('mywebsite')">

I just wanted to add that this can be done with an object tag. The trick is that you have to create a new object for it to update with the new html.

function resetObj (linkToNewPage, idOfObjectToChange) {
    var clone = document.getElementById(idOfObjectToChange).cloneNode(true); 
    clone.data = linkToNewPage; 
    var placeHolder = document.getElementById(idOfObjectToChange).parentNode; 
    placeHolder.removeChild(document.getElementById(idOfObjectToChange)); 
    placeHolder.appendChild(clone); 
}

Object elements don't update with new 'data' information for some reason without doing this. Basically you're cloning the node, applying the new information, then get the parent of the old node, remove the old node, append the new node.