Html Object tag: access element in an html page

Question

I have page1 that contains an object tag that loads page2. Thing is, when opening page1 I need to hide a specific div in page2 when the the object tag loads it. Otherwise, when opening the page2 from a browser it should appear normally.

My html and javascript code look like this:

page1.html

<html>
....
<div id="myUrl">load object tag here</div>

<script>
...
   document.getElementById("myUrl").innerHTML = '<object type="text/html" width="500px" height="500px" data="path/page2.html" ></object>';

</script>
</html>

What I need is to hide mydiv if page2 is loaded in the object tag in page1:

page2.html

<html>
....
<div id="mydiv"><h3>test title</h3></div>
....

<script>
//if opened from htmlpage1 hide the div
$("#mydiv").hide();
</script>

</html>

After doing some research I came up with two possible ideas:

Using the param tag inside in page1 and check its value in page2 to hide mydiv
or have a javascript method in page2 that checks if the document (#document) is a child/inside of object.

I have been struggling to implement any of these ideas but with no success. I would appreciate it if someone could help me with this. Thank you.

Well let's just say it is a constraint. The page I am trying to load is very detailed and has a lot of tabs,links and tables and so on and has to be loaded in a dialog of a special jQuery library.... I tried using different ways like the jQuery load but it didn't really load the page as cleanly as it should have been, also any clicked link would open in the initial page not in the dialog...but yeah it's a solution I adopted after trying several ways. — Estarossa
– Estarossa, Commented Feb 25, 2015 at 20:00
Well it's mainly the design/appearance, iframes didn't really look 'nice' and haven't really tried too hard with them. Otherwise, object loaded my page cleanly like a charm. Oh and I actually picked this up from 2 or 3 stack overflow questions who used it, I just tried it too and it looked right. — Estarossa
– Estarossa, Commented Feb 25, 2015 at 20:07
that's why i like this place, learn something new every day! BTW, not hard to remove any visible trace of iframe with css — charlietfl
– charlietfl, Commented Feb 25, 2015 at 20:08

bvaughn · Accepted Answer · 2015-02-25 19:26:04Z

1

Like @charlietfl, I'm also curious why you use an <object> tag. But the general approach I'd recommend would be for page-1 to send page-2 a query parameter (e.g. "path/page2.html?disableCheck=true").

Then you can check for this in page-2 like so:

<script>
  if (location.search.indexOf("disableCheck")) {
    $("#mydiv").hide();
 }
</script>

This query-param approach could obviously be faked, but I suspect that's not a major concern.

answered Feb 25, 2015 at 19:26

bvaughn

13.5k49 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Estarossa Over a year ago

Ye object was the solution if I wanted to display a full and working html page correctly in a dialog as if in a different window...For your response is it then possible to to send that query parameter in the data attribute?

bvaughn Over a year ago

Hm. Should be possible, yeah. So far as I know the JavaScript in page-2 should be able to read the query string like normal.

Estarossa Over a year ago

I tried doing this but it always returns -1 but good Idea I found javascript method that check a query param and it is working now thanks for the direction !

Collectives™ on Stack Overflow

Html Object tag: access element in an html page

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related