How can I share HTML markup between two different HTML files?

Question

Hi guys, I'm trying to build a simple extension for Opera 11 and I've hit a massive snag I'm sure most developers meet.

In case you don't know, an extension in Opera is just another .html file, with some Javascript if you choose.

What I'm having trouble with is getting the HTML source from the CALLING web page and passing it to the popup.html.

So for example, I'm on my Blog, I'd like to pass that markup and have that as the 'document' variable. Instead the 'document' variable is empty because it's using the popup.html's content - not the calling content.

How could I pass the HTML of the main browser to the popup.html?

Here is the code I have so you can see what I'm trying to do:

<script>
    var imgs = document.getElementsByTagName('img')
    var t = "";
    for (var i=0, n=imgs.length;i<n;i++) t += '<br><a href="'+imgs[i].src+'"><img src="'+imgs[i].src+'" width="100"></a>';
    document.write(t)
</script>

Answer 1

Hey friend, the popup is another window with its own document object and window object.

Consider to use a internal popup, like the type that jquery-ui provides to open a popup in the same context of your code.

jquery dialog

Answer 2

Hey friend, there is another solution to you.

When you open a window with open() method, it will return the context of that window.

so, if you do something like this:

var popup = window.open("http://something","blablabla");

then, you can acess the document of that window with the variable "popup":

popup.document.write("Anything you wanna!");

I think this solve your problem, since now you can write html on popup with code on the main window.

Answer 3

This is very simple. Once you create the popup, save the reference to a variable and from that you can call methods or find and pass data to any element.

Example:

var popup = window.open("child.html");
popup.document.getElementById("id").value = "xxx";

I hope this helps