1

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.

3
  • It also helps to use a framework like jQuery: api.jquery.com/html Commented Feb 24, 2011 at 16:23
  • 2
    What exactly do you mean with "object"? A JavaScript object, the HTML element `<object>? And what exactly do you mean with its "content"? Commented Feb 24, 2011 at 16:24
  • What are you trying to do? Open a popup, change the HTML in an element or change some parameters of an object tag? Commented Feb 24, 2011 at 16:26

4 Answers 4

3

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>
Sign up to request clarification or add additional context in comments.

3 Comments

Again I want to load a html page into an object <object> using JS
In that case, you need an iFrame. Why do you want to use an object tag? You can use iframe.src to change the url of an iframe.
OK that sounds good care to post some simple code to support. thanks
0

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>');

Comments

0

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')">

2 Comments

Thats not really what I wanted. I need to know how to open a html page within an <object> using javascript.
document.all really...? Open this link in a browser other than IE/Opera jsfiddle.net/Xx2au Changing it to document.getElementById('myFrame') // cross-browser
0

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.

Comments