Embedding a browser inside a page

**eazyGen** · Dec 3, 2012 20:12

Hi Guys,

I have trawled through various sites but have been unable to find a satisfactory solution.

What I would like to do is to embed a browser (preferable FF or Chrome) into a page and then send statements to the browser so it reflects what I am sending it. It is like a preview to help me perfect my instrctions.

Has anyone got experience of this or knows the best way to go about it?

Many thanks in advance,

S

**chris.upjohn** · Dec 3, 2012 21:42

What do you mean by "Embed a browser"?

Do you mean an image or an actual browser window?

**eazyGen** · Dec 4, 2012 00:26

An actual browser. I am building a UI design tool and I have a set of javascript components. I would like to get an option whereby I can post a component to an embeded brower and see the result. When I am happy with what I have got, I will then generate the relevant html and javascript into useable items. But I would like the embede browser for preview purpose. There are quite a few around, but I am unsure how to go about placing the browser on a page and adjusting the code and see the resultsi in the browser. I hope that made sense.

Thanks for your time.

S

**ralph.m** · Dec 4, 2012 02:11

Why not just run the code in your browser, either by viewing the results on the page or in the console? Would those options work?

**eazyGen** · Dec 4, 2012 02:19

Could you expand about the console you mentioned. I don't know much about that. How would it shiow on a page and respond to statements I give it?

**ralph.m** · Dec 4, 2012 02:34

I only know the basics of it, but create a .html page, for example, with some JS in it. A simple example would be

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
	
<script>

var name = "Jack";
console.log("My name is " + name);

</script>
	
</head>
<body>

</body>
</html>

Now, open Chrome, click View > Developer > Developer Tools, and a window opens at the bottom of the browser. Click the Console tab, then refresh the page. You will see the output of the script at the in the Console window. (There are instructions for the Mac version of Chrome, but I assume it's similar on Windoze.)

You can type instructions in the Console, too, and thus interact with the browser.
This is a great video that shows what you can do with Chrome dev tools:

http://www.youtube.com/watch?v=N8SS-rUEZPg

**eazyGen** · Dec 7, 2012 03:22

Originally Posted by ralph.m

I only know the basics of it, but create a .html page, for example, with some JS in it. A simple example would be

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
	
<script>

var name = "Jack";
console.log("My name is " + name);

</script>
	
</head>
<body>

</body>
</html>

Now, open Chrome, click View > Developer > Developer Tools, and a window opens at the bottom of the browser. Click the Console tab, then refresh the page. You will see the output of the script at the in the Console window. (There are instructions for the Mac version of Chrome, but I assume it's similar on Windoze.)

You can type instructions in the Console, too, and thus interact with the browser.
This is a great video that shows what you can do with Chrome dev tools:

http://www.youtube.com/watch?v=N8SS-rUEZPg

That was not quite what I was after, but thank you very much for your time and thoughts.

S

**solidcodes** · Dec 7, 2012 05:04

@eazyGen

Are you trying to test a page for cross browser compatability?

**eazyGen** · Dec 7, 2012 05:39

Hi there.

No I want to feed a set of instructions (java components actually) into a browser and see the results - it is a screen designer I am after. I could use an external browser page, but that would not very user friendly

S

User Tag List

Thread: Embedding a browser inside a page

Thread Tools

Display

Embedding a browser inside a page

Bookmarks

Bookmarks

Posting Permissions