internal static IHTMLIFrame CreateEditor() { var edit = new IHTMLIFrame { src = "about:blank" }; edit.style.width = "100%"; edit.style.height = "100%"; edit.style.border = "0"; edit.style.margin = "0"; edit.style.padding = "0"; edit.frameBorder = "0"; edit.border = "0"; edit.WhenDocumentReady( document => { document.WithContent( new XElement("style", "span { color: red; }"), new XElement("div", new XAttribute("style", "margin: 2em;"), new XElement("h1", "powered by jsc"), new XElement("span", "hello world") ) ); document.DesignMode = true; } ); return(edit); }
public static IHTMLIFrame WhenContentReady(this IHTMLIFrame that, Action <IHTMLBody> y) { return(that.WhenDocumentReady( doc => { doc.WhenContentReady(y); } )); }
public static void WithContent(this IHTMLIFrame that, Action <IHTMLBody> y) { that.WhenDocumentReady( d => { d.WithContent(); d.WhenContentReady(y); } ); }
public static IHTMLIFrame WhenDocumentReady(this IHTMLIFrame that, Action <IHTMLDocument> y) { new Timer( t => { if (that.contentWindow == null) { return; } if (that.contentWindow.document == null) { return; } t.Stop(); y(that.contentWindow.document); } ).StartInterval(15); return(that); }
static void InitializeContnt(IDefaultPage page) { Action <dynamic> stream = x => { object time = x.time; object i = x.i; Native.document.title = new { time, i }.ToString(); Console.WriteLine(new { time, i }.ToString()); page.Content.innerText = new { time, i }.ToString(); }; dynamic window = Native.window; window.stream = stream; var stop = new IHTMLButton("Stop").AttachToDocument(); var iframe = new IHTMLIFrame { src = "/stream" }.AttachToDocument(); iframe.Hide(); page.Start.disabled = true; stop.onclick += delegate { stop.Orphanize(); page.Start.disabled = false; iframe.Orphanize(); }; Native.document.body.style.cursor = IStyle.CursorEnum.@default; }
internal static IHTMLIFrame CreateEditor() { var edit = new IHTMLIFrame { src = "about:blank" }; edit.style.width = "100%"; edit.style.height = "100%"; edit.style.border = "0"; edit.style.margin = "0"; edit.style.padding = "0"; edit.frameborder = "0"; edit.border = "0"; edit.WhenDocumentReady( document => { document.WithContent(StockPageDefault.Element); document.DesignMode = true; } ); return(edit); }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { // http://stackoverflow.com/questions/6275953/how-to-display-div-over-a-java-applet-in-chrome new ConsoleForm().With( f => { f.InitializeConsoleFormWriter(); f.Show(); //var archive = applet.ToHTMLElement().AsXElement().Attribute("archive"); //archive.Value = ("" + Native.Document.location).TakeUntilLastOrEmpty("/") + "/" + archive.Value; Console.WriteLine("calling applet.InitializeConsoleFormWriter"); applet.InitializeConsoleFormWriter( Console.Write, Console.WriteLine ); Console.WriteLine("you are looking at FormsVirtualConsoleExperiment!!"); applet.AttachAppletToDocument(); var shadow = new IHTMLIFrame { src = "about:blank", frameBorder = "0", scrolling = "no" }; shadow.AttachToDocument(); shadow.style.SetLocation(120, 48); shadow.style.zIndex = 0; Action Update = delegate { shadow.style.SetLocation(f.Left, f.Top, f.Width, f.Height); }; f.LocationChanged += delegate { Update(); }; f.SizeChanged += delegate { Update(); }; Update(); Native.Window.onresize += delegate { applet.ToHTMLElement().style.SetSize( Native.Window.Width, Native.Window.Height ); }; } ); @"Hello world".ToDocumentTitle(); // Send data from JavaScript to the server tier service.WebMethod2( @"A string from JavaScript.", value => value.ToDocumentTitle() ); }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IDefault page) { if (Native.Document.location.hash == "") { page.Content.innerText = "this page shall have child frames!"; var a = new IHTMLIFrame { allowFullScreen = true }.AttachToDocument(); a.contentWindow.document.location.replace("#/child1"); var b = new IHTMLIFrame { allowFullScreen = true }.AttachToDocument(); b.contentWindow.document.location.replace("#/child2"); new IHTMLBreak().AttachToDocument(); var i = 3; new IHTMLButton { innerText = "new child popup window" }.WhenClicked( btn => { var w = Native.window.open( "#/child" + i, "_blank", 400, 300, false ); w.focus(); i++; w.onload += delegate { w.postMessage("hi from " + Native.Document.location.hash); }; } ).AttachToDocument(); new IHTMLButton { innerText = "new child tab window" }.With( btn => { btn.onclick += delegate { var w = Native.window.open( "#/child" + i, "_blank" ); i++; w.onload += delegate { w.postMessage("hi from " + Native.Document.location.hash); }; }; } ).AttachToDocument(); new IHTMLBreak().AttachToDocument(); } else { page.Content.innerText = Native.Document.location.hash; Native.window.opener.With( parent => { new IHTMLButton { innerText = "send opener a message" }.With( btn => { btn.onclick += delegate { parent.postMessage("hi from " + Native.Document.location.hash); }; } ).AttachToDocument(); } ); Native.window.parent.With( parent => { // not talking to self if (parent == Native.window) { return; } new IHTMLButton { innerText = "send parent a message" }.With( btn => { btn.onclick += delegate { parent.postMessage("hi from " + Native.Document.location.hash); }; } ).AttachToDocument(); } ); new IHTMLButton { innerText = "fullscreen" }.With( btn => { btn.onclick += delegate { Native.Document.body.requestFullscreen(); }; } ).AttachToDocument(); } Native.window.onmessage += e => { new IHTMLButton { innerText = e.data + " (click to reply)" }.With( btn => { if (Native.Document.location.hash == "") { btn.style.color = JSColor.Blue; } else { btn.style.color = JSColor.Red; } btn.onclick += delegate { btn.Orphanize(); var WhoAmI = Native.Document.location.hash; if (WhoAmI == "") { WhoAmI = "parent"; } e.source.postMessage("this is a reply from " + WhoAmI); }; } ).AttachToDocument(); }; @"Hello world".ToDocumentTitle(); // Send data from JavaScript to the server tier service.WebMethod2( @"A string from JavaScript.", value => value.ToDocumentTitle() ); }
private static void AddSection11(Action <string, IHTMLDiv> AddSection) { var ToolbarHeight = "24px"; var Content = new IHTMLDiv().With( k => { k.style.border = "1px solid gray"; k.style.position = ScriptCoreLib.JavaScript.DOM.IStyle.PositionEnum.relative; k.style.width = "100%"; k.style.height = "20em"; } ); //global::ScriptCoreLib.Ultra.Components.HTML // reload the project to make visual studio happy! new TwentyTenWorkspace().ToBackground(Content.style, true); var ToolbarContainerBackground = new IHTMLDiv().With( k => { k.style.position = ScriptCoreLib.JavaScript.DOM.IStyle.PositionEnum.absolute; k.style.left = "0px"; k.style.right = "0px"; k.style.top = "0px"; k.style.height = ToolbarHeight; k.style.backgroundColor = Color.White; k.style.Opacity = 0.5; } ).AttachTo(Content); var ToolbarContainer = new IHTMLDiv().With( k => { k.style.position = ScriptCoreLib.JavaScript.DOM.IStyle.PositionEnum.absolute; k.style.left = "0px"; k.style.right = "0px"; k.style.top = "0px"; k.style.height = ToolbarHeight; } ).AttachTo(Content); var PreviewContainer = new IHTMLDiv().With( k => { k.style.position = ScriptCoreLib.JavaScript.DOM.IStyle.PositionEnum.absolute; k.style.left = "0px"; k.style.right = "0px"; k.style.top = ToolbarHeight; k.style.bottom = "0px"; } ).AttachTo(Content); var PreviewFrame = new IHTMLIFrame { src = "about:blank" }; PreviewFrame.style.width = "100%"; PreviewFrame.style.height = "100%"; PreviewFrame.style.border = "0"; PreviewFrame.style.margin = "0"; PreviewFrame.style.padding = "0"; PreviewFrame.frameBorder = "0"; PreviewFrame.border = "0"; PreviewFrame.AttachTo(PreviewContainer); PreviewContainer.Hide(); var EditorContainer = new IHTMLDiv().With( k => { k.style.position = ScriptCoreLib.JavaScript.DOM.IStyle.PositionEnum.absolute; k.style.left = "0px"; k.style.right = "0px"; k.style.top = ToolbarHeight; k.style.bottom = "0px"; } ).AttachTo(Content); var EditorFrame = VisualStudioView.CreateEditor().AttachTo(EditorContainer); PreviewFrame.allowTransparency = true; EditorFrame.allowTransparency = true; EditorFrame.WhenContentReady( body => { body.style.backgroundColor = Color.Transparent; new IHTMLDiv { "Hello world :)" }.With( div => { div.style.backgroundColor = Color.White; div.style.borderColor = Color.Gray; div.style.borderStyle = "solid"; div.style.borderWidth = "1px"; div.style.margin = "2em"; div.style.padding = "2em"; } ).AttachTo(body); } ); var ToolbarContent = new IHTMLDiv().AttachTo(ToolbarContainer); ToolbarContent.style.position = ScriptCoreLib.JavaScript.DOM.IStyle.PositionEnum.relative; Action <IHTMLElement> ApplyToolbarButtonStyle = k => { k.style.verticalAlign = "top"; k.style.padding = "0"; k.style.margin = "0"; k.style.overflow = ScriptCoreLib.JavaScript.DOM.IStyle.OverflowEnum.hidden; k.style.SetSize(24, 24); VisualStudioView.ApplyMouseHoverStyle(k, Color.Transparent); }; Func <IHTMLImage, IHTMLButton> AddButtonDummy = (img) => { return(new IHTMLButton { img.WithinContainer() }.With(k => ApplyToolbarButtonStyle(k)).AttachTo(ToolbarContent)); }; Func <IHTMLImage, Action, IHTMLButton> AddButtonAction = (img, command) => { return(AddButtonDummy(img).With( k => { k.onclick += delegate { command(); }; } )); }; Func <IHTMLImage, string, IHTMLButton> AddButton = (img, command) => { return(AddButtonAction(img, () => EditorFrame.contentWindow.document.execCommand( command, false, null ) )); }; //AddButtonDummy(new RTA_save()); var SaveContainer = new IHTMLDiv().With(k => ApplyToolbarButtonStyle(k)).AttachTo(ToolbarContent); SaveContainer.style.display = ScriptCoreLib.JavaScript.DOM.IStyle.DisplayEnum.inline_block; //var Save = new InternalSaveActionSprite(); //Save.ToTransparentSprite(); //Save.AttachSpriteTo(SaveContainer); var s = new { VisualStudioTemplates.VisualCSharpProject }; EditorFrame.WhenContentReady( body => { var t = (IHTMLTextArea)EditorFrame.contentWindow.document.createElement("textarea"); t.AttachTo(body); t.value = s.ToString(); } ); //Save.WhenReady( // i => // { // i.FileName = "Project1.zip"; // i.Add("Project1.txt", "x"); // i.Add("Project1.csproj", s.VisualCSharpProject); // } //); ToolbarContent.Add(new RTA_separator_horizontal()); var RTAButtons = new Dictionary <string, IHTMLImage> { // http://trac.symfony-project.org/browser/plugins/dmCkEditorPlugin/web/js/ckeditor/_source/plugins?rev=27455 { "Bold", new RTA_bold() }, { "Underline", new RTA_underline() }, { "Strikethrough", new RTA_strikethrough() }, { "Italic", new RTA_italic() }, { "JustifyLeft", new RTA_justifyleft() }, { "JustifyCenter", new RTA_justifycenter() }, { "JustifyRight", new RTA_justifyright() }, { "JustifyFull", new RTA_justifyfull() }, { "Indent", new RTA_indent() }, { "Outdent", new RTA_outdent() }, { "Superscript", new RTA_superscript() }, { "Subscript", new RTA_sub() }, { "Removeformat", new RTA_removeformat() }, { "InsertOrderedList", new RTA_numberedlist() }, { "InsertUnorderedList", new RTA_numberedlist() }, { "undo", new RTA_undo() }, { "redo", new RTA_redo() }, }.ToDictionary( k => k.Key, k => AddButton(k.Value, k.Key) ); var ButtonDesign = default(IHTMLButton); var ButtonHTML = default(IHTMLButton); ButtonDesign = AddButtonAction(new RTA_mode_design(), delegate { ButtonDesign.Hide(); ButtonHTML.Show(); EditorContainer.Show(); PreviewContainer.Hide(); } ); ButtonHTML = AddButtonAction(new RTA_mode_html(), delegate { ButtonHTML.Hide(); PreviewFrame.WithContent( body => { body.style.backgroundColor = Color.Transparent; body.innerHTML = EditorFrame.contentWindow.document.body.innerHTML; EditorContainer.Hide(); PreviewContainer.Show(); ButtonDesign.Show(); } ); } ); ButtonDesign.Hide(); AddSection( "Editor with toolbar with background and preview", Content ); }
static Application() { new IHTMLPre { new { Native.document.currentScript.src } }.AttachToDocument(); #region HopToIFrame HopToIFrame.VirtualOnCompleted = async(that, continuation) => { new IHTMLPre { "enter HopToIFrame.VirtualOnCompleted.." }.AttachToDocument(); var r = TestSwitchToServiceContextAsync.ShadowIAsyncStateMachine.ResumeableFromContinuation(continuation); // X:\jsc.svn\examples\javascript\Test\TestSwitchToIFrame\TestSwitchToIFrame\Application.cs //var m = await that.frame.contentWindow.async.onmessage; var m = await that.frame.async.onmessage; //new IHTMLPre { // " VirtualOnCompleted postMessageAsync " + new { r.shadowstate.state } //}.AttachToDocument(); // um. we need to tell that iframe, where to jump to.. //var firstmessageback = that.frame.contentWindow.postMessageAsync(r.shadowstate); m.postMessage(r.shadowstate); that.frame.ownerDocument.defaultView.onmessage += e => { if (e.source != that.frame.contentWindow) { return; } var shadowstate = (TestSwitchToServiceContextAsync.ShadowIAsyncStateMachine)e.data; // are we jumping into a new statemachine? new IHTMLPre { "iframe is about to jump to parent " + new { shadowstate.state } }.AttachToDocument(); // about to invoke #region xAsyncStateMachineType var xAsyncStateMachineType = typeof(Application).Assembly.GetTypes().FirstOrDefault( item => { // safety check 1 //Console.WriteLine(new { sw.ElapsedMilliseconds, item.FullName }); var xisIAsyncStateMachine = typeof(IAsyncStateMachine).IsAssignableFrom(item); if (xisIAsyncStateMachine) { //Console.WriteLine(new { item.FullName, isIAsyncStateMachine }); return(item.FullName == shadowstate.TypeName); } return(false); } ); #endregion var NewStateMachine = FormatterServices.GetUninitializedObject(xAsyncStateMachineType); var isIAsyncStateMachine = NewStateMachine is IAsyncStateMachine; var NewStateMachineI = (IAsyncStateMachine)NewStateMachine; #region 1__state xAsyncStateMachineType.GetFields( System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Instance ).WithEach( AsyncStateMachineSourceField => { Console.WriteLine(new { AsyncStateMachineSourceField }); if (AsyncStateMachineSourceField.Name.EndsWith("1__state")) { AsyncStateMachineSourceField.SetValue( NewStateMachineI, shadowstate.state ); } } ); #endregion Console.WriteLine("invoke MoveNext"); NewStateMachineI.MoveNext(); }; }; #endregion #region HopToParent HopToParent.VirtualOnCompleted = async(that, continuation) => { // the state is in a member variable? var r = TestSwitchToServiceContextAsync.ShadowIAsyncStateMachine.ResumeableFromContinuation(continuation); // should not be a zero state // or do we have statemachine name clash? new IHTMLPre { "enter HopToParent.VirtualOnCompleted.. " + new { r.shadowstate.state } }.AttachToDocument(); //Native.window.parent.postMessage(r.shadowstate); // we actually wont use the response yet.. }; #endregion // fsharpy look vctor = (IApp page) => { // {{ href = blob:https%3A//192.168.1.196%3A27831/bafa8242-82bd-44ef-8581-9f76f909cd86 }} new IHTMLPre { new { Native.document.location.href } }.AttachToDocument(); if (Native.window.parent != Native.window) { // X:\jsc.svn\examples\javascript\chrome\extensions\ChromeExtensionHopToTabThenIFrame\ChromeExtensionHopToTabThenIFrame\Application.cs // inside iframe new { }.With( async delegate { // start the handshake // we gain intellisense, but the type is partal, likely not respawned, acivated, initialized //var m = await Native.window.parent.postMessageAsync<TestSwitchToServiceContextAsync.ShadowIAsyncStateMachine>(); // new IHTMLPre { // "inside iframe awaiting onmessage" //}.AttachToDocument(); var m = await Native.window.parent.postMessageAsync <TestSwitchToServiceContextAsync.ShadowIAsyncStateMachine>(); var shadowstate = m.data; //var m = await Native.window.parent.async.onmessage; //var shadowstate = (TestSwitchToServiceContextAsync.ShadowIAsyncStateMachine)m.data; new IHTMLPre { new { shadowstate.state } }.AttachToDocument(); // about to invoke #region xAsyncStateMachineType var xAsyncStateMachineType = typeof(Application).Assembly.GetTypes().FirstOrDefault( item => { // safety check 1 //Console.WriteLine(new { sw.ElapsedMilliseconds, item.FullName }); var xisIAsyncStateMachine = typeof(IAsyncStateMachine).IsAssignableFrom(item); if (xisIAsyncStateMachine) { //Console.WriteLine(new { item.FullName, isIAsyncStateMachine }); return(item.FullName == shadowstate.TypeName); } return(false); } ); #endregion var NewStateMachine = FormatterServices.GetUninitializedObject(xAsyncStateMachineType); var isIAsyncStateMachine = NewStateMachine is IAsyncStateMachine; var NewStateMachineI = (IAsyncStateMachine)NewStateMachine; #region 1__state xAsyncStateMachineType.GetFields( System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Instance ).WithEach( AsyncStateMachineSourceField => { Console.WriteLine(new { AsyncStateMachineSourceField }); if (AsyncStateMachineSourceField.Name.EndsWith("1__state")) { AsyncStateMachineSourceField.SetValue( NewStateMachineI, shadowstate.state ); } } ); #endregion NewStateMachineI.MoveNext(); // we can now send one hop back? } ); return; } var codetask = new WebClient().DownloadStringTaskAsync( new Uri(Worker.ScriptApplicationSource, UriKind.Relative) ); #region click to switch // https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2015/201510/20151026 new IHTMLButton { "click to switch" }.AttachToDocument().onclick += async delegate { Native.body.style.backgroundColor = "yellow"; // can we compile shaders in frames in parallel? var code = await codetask; var aFileParts = new[] { code }; var oMyBlob = new Blob(aFileParts, new { type = "text/javascript" }); //var url = oMyBlob.ToObjectURL(); var url = URL.createObjectURL(oMyBlob); var frame = new IHTMLIFrame { new XElement("script", new XAttribute("src", url), " ") }.AttachToDocument(); // can we our code in that blank document? // not fired for blank? await frame.async.onload; ////var x = frame.ownerDocument.createElement(IHTMLElement.HTMLElementEnum.button); ////x.AttachTo(frame.ownerDocument.documentElement); Native.body.style.backgroundColor = "cyan"; await(HopToIFrame) frame; var f = new IHTMLButton { "in the frame! click to notify parent" }.AttachToDocument(); // 134ms TypeError: Cannot set property 'outerscope' of null //var outerscope = "outerscope"; f.onclick += async delegate { var innerscope = "innerscope"; // can we jump back? // can we ask how many frames are there? // can we jump in any other frame? // if we jump back to another statemachine, can we reference the outer statemachine? // can we call the server? new IHTMLPre { "inside iframe about to jump to parent " + new { //outerscope, innerscope } }.AttachToDocument(); // never completes? await default(HopToParent); // cant see it? Console.WriteLine("are we back?"); new IHTMLPre { "iframe onclick, inside parent now" }.AttachToDocument(); // can we jump back? would we know where to jump back to? //await default(HopToIFrame); }; }; #endregion }; }
public static Action BindKeyboardToDiagnosticsConsole() { var diagnostics = new IHTMLIFrame { src = "/jsc", frameBorder = "0" }; diagnostics.style.backgroundColor = "rgba(255, 255, 255, 0)"; diagnostics.style.position = IStyle.PositionEnum.absolute; diagnostics.style.left = "0px"; diagnostics.style.top = "-100%"; diagnostics.style.width = "100%"; diagnostics.style.height = "100%"; // stay on top! diagnostics.style.zIndex = 10000; Console.WriteLine("You can now press tilde key to see the /jsc page."); diagnostics.AttachToDocument(); // http://www.w3schools.com/css3/css3_transitions.asp diagnostics.style.With( (dynamic s) => s.webkitTransition = "all 0.2s ease-in-out" ); diagnostics.style.With( (dynamic s) => s.transition = "all 0.3s ease-in-out" ); Action Hide = delegate { diagnostics.style.top = "-100%"; diagnostics.style.backgroundColor = "rgba(255, 255, 255, 0)"; }; Action Show = delegate { diagnostics.style.top = "0%"; diagnostics.style.backgroundColor = "rgba(255, 255, 255, 0.9)"; }; Action Toggle = delegate { if (diagnostics.style.top == "0%") { Hide(); } else { Show(); } }; Action <int> AtKeyCode = KeyCode => { new { KeyCode }.ToString().ToDocumentTitle(); if (KeyCode == 27) { Hide(); } // US if (KeyCode == 222) { Toggle(); } // EE if (KeyCode == 192) { Toggle(); } }; diagnostics.onload += delegate { diagnostics.contentWindow.document.onkeyup += e => { AtKeyCode(e.KeyCode); }; diagnostics.contentWindow.document.oncontextmenu += e => { e.preventDefault(); Hide(); }; }; Native.document.onkeyup += e => { AtKeyCode(e.KeyCode); }; //Native.window.onorientationchange += // delegate // { // if (Native.window.orientation == 90) // Show(); // else if (Native.window.orientation == -90) // Show(); // else // Hide(); // }; return(Toggle); }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IDefault page = null) { var location = "" + Native.document.location; #if false #region workaround for ThreeJS/chrome webgl upscale bug // workaround for not knowing how to tell three js to upscale correctly.. // X:\jsc.svn\examples\javascript\Test\TestNestedIFrameForMoreWidth\TestNestedIFrameForMoreWidth\Application.cs // instead of reloading full app // could we run part of it instead? // like let jsc know that this sub application should be reloadable? // this will be like threading // the outer code wil just stop doing anything // and the inner app will take over. if (Native.window.Width < Native.screen.width) { #region make sure the url looks different to make iframe actually load Native.window.parent.With( parent => { // http://stackoverflow.com/questions/5934538/is-there-a-limitation-on-an-iframe-containing-another-iframe-with-the-same-url var parentlocation = ""; try { parentlocation = parent.document.location.href; Console.WriteLine(new { parentlocation }); } catch { // we are sandboxed! } if (parentlocation.TakeUntilIfAny("#") == location.TakeUntilIfAny("#")) { var withouthash = location.TakeUntilIfAny("#"); var onlyhash = location.SkipUntilOrEmpty("#"); withouthash += "?"; if (onlyhash != "") { withouthash += "#" + onlyhash; } location = withouthash; } } ); #endregion // this check only looks for default screen width // what about height and secondary screens? Console.WriteLine("will prepare... " + location); var iframe = new IHTMLIFrame { frameBorder = "0", allowFullScreen = true }; iframe.style.minWidth = Native.screen.width + "px"; iframe.style.minHeight = Native.screen.height + "px"; iframe.style.position = IStyle.PositionEnum.absolute; iframe.style.left = "0px"; iframe.style.top = "0px"; iframe.style.width = "100%"; iframe.style.height = "100%"; Native.document.body.Clear(); Native.document.body.style.overflow = IStyle.OverflowEnum.hidden; Native.window.onmessage += e => { Console.WriteLine("Native.Window.onmessage " + new { e.data }); // pure trickery :P if ((string)e.data == "WebGLDynamicTerrainTemplate.loaded") { iframe.style.minWidth = ""; iframe.style.minHeight = ""; } }; iframe.onload += delegate { if (iframe.src != location) { return; } Native.window.requestAnimationFrame += delegate { Console.WriteLine("reload done! " + new { location, iframe.src }); iframe.contentWindow.postMessage("ready yet?"); }; }; Native.window.requestAnimationFrame += delegate { Console.WriteLine("will reload... " + location); iframe.AttachToDocument(); iframe.src = location; }; return; } #endregion #endif #region await Three.js then do InitializeContent new[] { new global::WebGLDynamicTerrainTemplate.Design.ThreeTerrain().Content, new global::WebGLDynamicTerrainTemplate.Design.ShaderTerrain().Content, new global::WebGLDynamicTerrainTemplate.Design.ShaderExtrasTerrain().Content, new global::WebGLDynamicTerrainTemplate.Design.PostprocessingTerrain().Content, }.ForEach( (SourceScriptElement, i, MoveNext) => { SourceScriptElement.AttachToDocument().onload += delegate { MoveNext(); }; } )( delegate { InitializeContent(page); } ); #endregion style.Content.AttachToHead(); }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { #region con //var con = new Abstractatech.ConsoleFormPackage.Library.ConsoleForm(); var con = new ConsoleForm(); con.InitializeConsoleFormWriter(); con.Show(); con.Left = Native.Window.Width - con.Width; con.Top = 0; Native.Window.onresize += delegate { con.Left = Native.Window.Width - con.Width; con.Top = 0; }; con.Opacity = 0.6; con.HandleFormClosing = false; con.PopupInsteadOfClosing(); #endregion Console.WriteLine("click on InitializeOurFacebookLoginService!"); Native.Window.onmessage += e => { // http://developer.klout.com/blog/read/fb_identity_lookup Console.WriteLine("onmessage: " + e.data); }; // wont work as chrome app! page.InitializeOurFacebookLoginService.WhenClicked( delegate { Console.WriteLine("loading... "); // http://caniuse.com/iframe-sandbox // http://security.stackexchange.com/questions/15146/using-iframes-to-sandbox-untrusted-code var i = new IHTMLIFrame { }; // http://www.w3schools.com/tags/att_iframe_sandbox.asp // The value of the sandbox attribute can either be an empty string (all the restrictions is applied), or a space-separated list of pre-defined values that will REMOVE particular restrictions. // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/ // this will break our popups and cookies for facebook! //i.setAttribute("sandbox", "allow-scripts allow-forms allow-popups"); i.src = "http://young-beach-4377.herokuapp.com/"; i.AttachToDocument(); i.onload += delegate { Console.WriteLine("loading... done " + new { i.src }); // can we now talk to it? // }; } ); page.InitializeOurFacebookLoginServiceViaWindow.WhenClicked( delegate { Console.WriteLine("loading... "); //var i = new IWindow { }; //i.document.location.href = "http://young-beach-4377.herokuapp.com/"; var i = Native.Window.open("http://young-beach-4377.herokuapp.com/", "_blank", 400, 225); // doesnt tell us when loaded? i.onload += delegate { Console.WriteLine("loading... done..."); //Console.WriteLine("loading... done " + new { i.document.title }); //Console.WriteLine("loading... done " + new { i.document.location.href }); // can we now talk to it? // }; // popup will be blocked //new IHTMLButton { innerText = "send DoLogin" }.AttachToDocument().WhenClicked( // delegate // { // Console.WriteLine("send DoLogin"); // i.postMessage( // new XElement("DoLogin", new XAttribute("tag", "foo")).ToString() // ); // } //); } ); page.InitializeOurFacebookLoginServiceViaWindowAndClose.WhenClicked( delegate { Console.WriteLine("loading... "); //var i = new IWindow { }; //i.document.location.href = "http://young-beach-4377.herokuapp.com/"; var i = Native.Window.open("http://young-beach-4377.herokuapp.com/#c", "_blank", 400, 225); // doesnt tell us when loaded? i.onload += delegate { Console.WriteLine("InitializeOurFacebookLoginServiceViaWindowAndClose loading... done..."); //Console.WriteLine("loading... done " + new { i.document.title }); //Console.WriteLine("loading... done " + new { i.document.location.href }); // can we now talk to it? // }; i.onbeforeunload += delegate { Console.WriteLine("InitializeOurFacebookLoginServiceViaWindowAndClose onbeforeunload"); }; // popup will be blocked //new IHTMLButton { innerText = "send DoLogin" }.AttachToDocument().WhenClicked( // delegate // { // Console.WriteLine("send DoLogin"); // i.postMessage( // new XElement("DoLogin", new XAttribute("tag", "foo")).ToString() // ); // } //); } ); page.HerokuFacebookLoginAppLoginExperience.WhenClicked( delegate { HerokuFacebookLoginAppLoginExperience.Login( (string id, string name, string third_party_id) => { Console.WriteLine(new { id, name, third_party_id }); } ); } ); @"Hello world".ToDocumentTitle(); // Send data from JavaScript to the server tier //service.WebMethod2( // @"A string from JavaScript.", // value => value.ToDocumentTitle() //); }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IDefaultPage page) { if (Native.Document.location.hash == "") { page.Content.innerText = "this page shall have child frames!"; var a = new IHTMLIFrame { src = "#/child1" }.AttachToDocument(); var b = new IHTMLIFrame { src = "#/child2" }.AttachToDocument(); new IHTMLBreak().AttachToDocument(); } else { page.Content.innerText = Native.Document.location.hash; window.parent.With( parent => { new IHTMLButton { innerText = "send parent a message" }.With( btn => { btn.onclick += delegate { parent.postMessage("hi from " + Native.Document.location.hash); }; } ).AttachToDocument(); } ); } window.onmessage += e => { new IHTMLButton { innerText = e.data + " (click to reply)" }.With( btn => { btn.style.color = JSColor.Blue; btn.onclick += delegate { btn.Orphanize(); var source = (XWindow)(object)e.source; var WhoAmI = Native.Document.location.hash; if (WhoAmI == "") { WhoAmI = "parent"; } source.postMessage("this is a reply from " + WhoAmI); }; } ).AttachToDocument(); //Native.Window.alert("window.onmessage: " + e.data); }; @"Hello world".ToDocumentTitle(); // Send data from JavaScript to the server tier service.WebMethod2( @"A string from JavaScript.", value => value.ToDocumentTitle() ); }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { // what about namespaces? // what about 3D objects? // what about nugets? // what about canvas? // what about threejs ? will it end up like XAML? // shall we automatically define custom elements? Native.document.registerElement("example-com", e => { //new XAttribute().Changed // http://msdn.microsoft.com/en-us/library/bb387098(v=vs.110).aspx // http://msdn.microsoft.com/en-us/library/system.xml.linq.xobject.changed(v=vs.110).aspx e.AsXElement().Changed += (sender, args) => { // MutationObserver // server side events too? }; var s = e.createShadowRoot(); //var i = new IHTMLIFrame { src = "http://example.com" }; var i = new IHTMLIFrame { // prevent cyclic reload src = "about:blank" //src = "http://example.com" }; s.appendChild( i ); e.attributes.WithEach( a => { //i.src = a.value; new IHTMLPre { "attribute " + new { a.name, a.value } }.AttachToDocument(); if (a.name == "foo") { // are we observing that too? i.src = a.value; } } ); // does it mean we are nowready to get events for XLinq? // is it suppsoed to work? new MutationObserver( new MutationCallback( (mutations, o) => { foreach (var item in mutations) { var value = e.getAttributeNode(item.attributeName).value; //i.src = ; new IHTMLPre { "MutationObserver " + new { item.attributeName, value, item.type, item.target } }.AttachToDocument(); if (item.attributeName == "foo") { // are we observing that too? i.src = value; } } } ) ).observe(e, new { attributes = true }); }, // http://www.w3.org/TR/2014/WD-dom-20140710/ // https://code.google.com/p/mutation-summary/wiki/DOMMutationObservers // http://stackoverflow.com/questions/5416822/dom-mutation-events-replacement attributeChangedCallback: (attributeName, e) => { // css conditionals new IHTMLPre { new { attributeName } }.AttachToDocument(); } ); var z = new IHTMLElement("example-com") { //$foo = "bar" //new XAttribute("foo", "bar") }.AttachToDocument(); z.setAttribute("foo", "http://example.com"); }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IDefault page = null) { // 1b90:01:01 0046:0009 My.Solutions.Pages.Templates.Application create interface WebGLDopamineMolecule.AssetsLibrary::WebGLDopamineMolecule.HTML.Pages.IDefault //{ Location = // assembly: X:\jsc.svn\examples\javascript\My.Solutions.Pages.Templates\My.Solutions.Pages.Templates\bin\Debug\WebGLDopamineMolecule.exe // type: WebGLDopamineMolecule.Application, WebGLDopamineMolecule, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null // offset: 0x0587 // method:Void .ctor(WebGLDopamineMolecule.HTML.Pages.IDefault) } //1b90:01:01 RewriteToAssembly error: System.MissingMethodException: Method not found: 'Void ScriptCoreLib.JavaScript.DOM.IWindow.add_onframe(System.Action)'. glMatrix ref1; THREE.Color ref0; var h = Native.document.location.hash; // are we running as a clone? // if so our location hash should be stored as html. Native.document.getElementsByTagName("link").Select(k => (IHTMLLink)k).Where(k => k.rel == "location").ToList().ForEach( location => { // href = file:///X:/temp/Spiral.htm#WebGLSpiral location.href.SkipUntilLastOrEmpty("#").With( href => { if (h == "") { h = "#" + href; } } ); } ); DiagnosticsConsole.ApplicationContent.BindKeyboardToDiagnosticsConsole(); Console.WriteLine("Templates loaded... " + new { Native.document.location, h }); //{ // var html = new global::wolfenstein4kTemplate.HTML.Pages.DefaultPage(); // html.Container.AttachToDocument(); // new global::wolfenstein4kTemplate.Application(html); //} Action LoadEmAll = delegate { }; var cc = new IHTMLCenter().AttachToDocument(); cc.style.lineHeight = "0px"; var cutoff = 480; #region iframe Action <int, int, double, IHTMLImage, string> iframe = (iwidth, iheight, maxextra, preview, alias) => { // media selector? if (alias == "") { } var c = new IHTMLDiv().AttachTo(cc); //c.style.backgroundColor = JSColor.Black; c.style.display = IStyle.DisplayEnum.inline_block; c.style.position = IStyle.PositionEnum.relative; c.style.SetSize(iwidth, iheight); IHTMLElement content = preview; preview.style.SetLocation(0, 0); preview.AttachTo(c); preview.style.cursor = IStyle.CursorEnum.pointer; preview.title = "Click to activate, doubleclick to enlarge"; var HasFocus = false; var HasMouse = false; Action content_SetExtraSize = delegate { }; #region SetExtraSize var SetExtraSize = NumericEmitter.OfDouble( (extrasizef, yy) => { var extrasize = System.Convert.ToInt32(iwidth * extrasizef * 0.5); content_SetExtraSize = delegate { content.style.zIndex = extrasize; if (HasFocus) { content.style.boxShadow = "0px 0px " + (extrasize) + "px 0px rgba(255, 255, 0, 1)"; } else { content.style.boxShadow = "0px 0px " + (extrasize) + "px 0px rgba(0, 0, 255, 1)"; } //box-shadow: 0px 0px 70px 0px rgba(0, 0, 0, 1); content.style.SetLocation( System.Convert.ToInt32(iwidth * extrasizef * -0.5), System.Convert.ToInt32(iheight * extrasizef * -0.5), System.Convert.ToInt32(iwidth * (1 + extrasizef)), System.Convert.ToInt32(iheight * (1 + extrasizef)) ); }; content_SetExtraSize(); } ); #endregion #region HasMouse c.onmouseover += delegate { HasMouse = true; if (HasFocus) { return; } SetExtraSize(maxextra, 0); }; c.onmouseout += delegate { HasMouse = false; if (HasFocus) { return; } SetExtraSize(0, 0); }; #endregion #region Activate Action Activate = delegate { // can we also do groups? //preview.Orphanize(); var a = new IHTMLIFrame { width = iwidth, height = iheight, frameBorder = "0", scrolling = "no", allowFullScreen = true }.AttachTo(c); preview.style.Opacity = 0.7; a.style.SetLocation(0, 0); #region HasFocus a.onload += delegate { //Native.Window.alert( // new { // a.contentWindow.performance.timing.connectStart, // a.contentWindow.performance.timing.loadEventStart, // } //); a.contentWindow.onblur += delegate { HasFocus = false; if (HasMouse) { SetExtraSize(maxextra * 1, 0); } else { SetExtraSize(0, 0); } }; a.contentWindow.onfocus += delegate { HasFocus = true; SetExtraSize(maxextra * 1.1, 0); }; if (HasMouse) { a.contentWindow.focus(); } new Timer( delegate { preview.FadeOut(); new Timer( delegate { content = a; content_SetExtraSize(); } ).StartTimeout(300); } ).StartTimeout(1000); }; #endregion a.contentWindow.document.location.replace(alias); //a.tabIndex = 1; }; LoadEmAll += delegate { if (Activate == null) { return; } Activate(); Activate = null; }; c.onclick += delegate { if (Activate == null) { return; } Activate(); Activate = null; // unsubscribe event; }; #endregion SetExtraSize(0, 0); }; #endregion #region y Action <string, Action, IHTMLImage> y = (alias, yield, preview) => { if (h == "") { if (Native.window.Width > cutoff) { iframe(96, 96, 3, preview, alias); } else { iframe(32, 32, 3, preview, alias); } } else if (h == alias) { if (yield != null) { yield(); } } }; #endregion // jsc cannot handle multiple delegates on the same statement yet. y("#WebGLDopamineMolecule", () => new WebGLDopamineMolecule.Application(), new WebGLDopamineMolecule.HTML.Images.FromAssets.Preview()); y("#WebGLEthanolMolecule", () => new WebGLEthanolMolecule.Application(), new WebGLEthanolMolecule.HTML.Images.FromAssets.Preview()); y("#WebGLYomotsuTPS", () => new WebGLYomotsuTPS.Application(), new WebGLYomotsuTPS.HTML.Images.FromAssets.Preview()); y("#WebGLYomotsuMD2Model", () => new WebGLYomotsuMD2Model.Application(), new WebGLYomotsuMD2Model.HTML.Images.FromAssets.Preview()); y("#WebGLSphereRayTrace", () => new WebGLSphereRayTrace.Application(), new WebGLSphereRayTrace.HTML.Images.FromAssets.Preview()); //y("#WebGLFireballExplosion", () => new WebGLFireballExplosion.Application(), new WebGLFireballExplosion.HTML.Images.FromAssets.Preview()); y("#WebGLChocolux", () => new WebGLChocolux.Application(), new WebGLChocolux.HTML.Images.FromAssets.Preview()); //y("#WebGLPuls", () => new WebGLPuls.Application(), new WebGLPuls.HTML.Images.FromAssets.Preview()); y("#WebGLCelShader", () => new WebGLCelShader.Application(), new WebGLCelShader.HTML.Images.FromAssets.Preview()); y("#WebGLClouds", () => new WebGLClouds.Application(), new WebGLClouds.HTML.Images.FromAssets.Preview()); y("#WebGLCone", () => new WebGLCone.Application(), new WebGLCone.HTML.Images.FromAssets.Preview()); y("#WebGLShaderDisturb", () => new WebGLShaderDisturb.Application(), new WebGLShaderDisturb.HTML.Images.FromAssets.Preview()); y("#WebGLDynamicTerrainTemplate", () => new WebGLDynamicTerrainTemplate.Application(), new WebGLDynamicTerrainTemplate.HTML.Images.FromAssets.Preview()); y("#WebGLEscherDrosteEffect", () => new WebGLEscherDrosteEffect.Application(), new WebGLEscherDrosteEffect.HTML.Images.FromAssets.Preview()); y("#WebGLInvade", () => new WebGLInvade.Application(), new WebGLInvade.HTML.Images.FromAssets.Preview()); y("#WebGLLesson01", () => new WebGLLesson01.Application(), new WebGLLesson01.HTML.Images.FromAssets.Preview()); y("#WebGLLesson02", () => new WebGLLesson02.Application(), new WebGLLesson02.HTML.Images.FromAssets.Preview()); y("#WebGLLesson03", () => new WebGLLesson03.Application(), new WebGLLesson03.HTML.Images.FromAssets.Preview()); y("#WebGLLesson04", () => new WebGLLesson04.Application(), new WebGLLesson04.HTML.Images.FromAssets.Preview()); y("#WebGLLesson05", () => new WebGLLesson05.Application(), new WebGLLesson05.HTML.Images.FromAssets.Preview()); y("#WebGLLesson06", () => new WebGLLesson06.Application(), new WebGLLesson06.HTML.Images.FromAssets.Preview()); y("#WebGLLesson07", () => new WebGLLesson07.Application(), new WebGLLesson07.HTML.Images.FromAssets.Preview()); y("#WebGLLesson08", () => new WebGLLesson08.Application(), new WebGLLesson08.HTML.Images.FromAssets.Preview()); y("#WebGLLesson09", () => new WebGLLesson09.Application(), new WebGLLesson09.HTML.Images.FromAssets.Preview()); y("#WebGLLesson10", () => new WebGLLesson10.Application(), new WebGLLesson10.HTML.Images.FromAssets.Preview()); y("#WebGLLesson11", () => new WebGLLesson11.Application(), new WebGLLesson11.HTML.Images.FromAssets.Preview()); y("#WebGLLesson12", () => new WebGLLesson12.Application(), new WebGLLesson12.HTML.Images.FromAssets.Preview()); y("#WebGLLesson13", () => new WebGLLesson13.Application(), new WebGLLesson13.HTML.Images.FromAssets.Preview()); y("#WebGLLesson14", () => new WebGLLesson14.Application(), new WebGLLesson14.HTML.Images.FromAssets.Preview()); y("#WebGLLesson15", () => new WebGLLesson15.Application(), new WebGLLesson15.HTML.Images.FromAssets.Preview()); y("#WebGLLesson16", () => new WebGLLesson16.Application(), new WebGLLesson16.HTML.Images.FromAssets.Preview()); y("#WebGLNyanCat", () => new WebGLNyanCat.Application(), new WebGLNyanCat.HTML.Images.FromAssets.Preview()); y("#WebGLPlanetGenerator", () => new WebGLPlanetGenerator.Application(), new WebGLPlanetGenerator.HTML.Images.FromAssets.Preview()); y("#WebGLSimpleCubic", () => new WebGLSimpleCubic.Application(), new WebGLSimpleCubic.HTML.Images.FromAssets.Preview()); y("#SpiderModel", () => new SpiderModel.Application(), new SpiderModel.HTML.Images.FromAssets.Preview()); y("#WebGLWindWheel", () => new WebGLWindWheel.Application(), new WebGLWindWheel.HTML.Images.FromAssets.Preview()); y("#WebGLTunnel", () => new WebGLTunnel.Application(), new WebGLTunnel.HTML.Images.FromAssets.Preview()); y("#WebGLSpiral", () => new WebGLSpiral.Application(), new WebGLSpiral.HTML.Images.FromAssets.Preview()); y("#WebGLCannonPhysicsEngine", () => new WebGLCannonPhysicsEngine.Application(), new WebGLCannonPhysicsEngine.HTML.Images.FromAssets.Preview()); y("#WebGLBossHarvesterByOutsideOfSociety", () => new WebGLBossHarvesterByOutsideOfSociety.Application(), new WebGLBossHarvesterByOutsideOfSociety.HTML.Images.FromAssets.Preview()); y("#WoodsXmasByRobert", () => new WoodsXmasByRobert.Application(), new WoodsXmasByRobert.HTML.Images.FromAssets.Preview()); //y("#WebGLBeachballsByDoob", () => new WebGLBeachballsByDoob.Application(), new WebGLBeachballsByDoob.HTML.Images.FromAssets.Preview()); y("#WebGLCity", () => new WebGLCity.Application(), new WebGLCity.HTML.Images.FromAssets.Preview()); // glMatrix y("#WebGLHand", () => new WebGLHand.Application(), new WebGLHand.HTML.Images.FromAssets.Preview()); y("#WebGLSpadeWarrior", () => new WebGLSpadeWarrior.Application(), new WebGLSpadeWarrior.HTML.Images.FromAssets.Preview()); if (h == "") { var maxextra = 3; var iwidth = 96; var iheight = 96; if (Native.window.Width > cutoff) { iframe(iwidth, iheight, maxextra, new HTML.Images.FromAssets.Preview(), ""); //iframe(iwidth, iheight, maxextra, new HTML.Images.FromAssets.Preview(), ""); new IHTMLButton { innerText = "Fullscreen" }.With( btn => { btn.style.position = IStyle.PositionEnum.absolute; btn.style.left = "1em"; btn.style.bottom = "1em"; btn.onclick += delegate { Native.Document.body.requestFullscreen(); }; } ).AttachToDocument(); new IHTMLButton { innerText = "Load Em All" }.With( btn => { btn.style.position = IStyle.PositionEnum.absolute; btn.style.right = "1em"; btn.style.bottom = "1em"; btn.onclick += delegate { btn.Orphanize(); LoadEmAll(); }; } ).AttachToDocument(); } else { iwidth = 32; iheight = 32; } #region ApplyMargins Action ApplyMargins = delegate { if (Native.window.Width < cutoff) { cc.style.margin = "0px"; } else { cc.style.margin = "3%"; cc.style.marginTop = "10%"; } }; ApplyMargins(); Native.window.onresize += delegate { ApplyMargins(); }; #endregion #region requestFullscreen Native.Document.body.ondblclick += delegate { //if (IsDisposed) // return; // http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/ Native.Document.body.requestFullscreen(); //AtResize(); }; #endregion } }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { var w = Native.Window.Width; var h = Native.Window.Height; new IHTMLPre { }.AttachToDocument().With( i => { Action u = delegate { i.innerText = new { w, Native.Window.Width, h, Native.Window.Height }.ToString(); }; u(); Native.Window.onresize += delegate { u(); }; } ); var location = "" + Native.Document.location; var parent = ""; new IHTMLPre { innerText = new { location, Native.Document.location.protocol, Native.Document.location.host, Native.Document.location.pathname, Native.Document.location.search, Native.Document.location.hash, }.ToString() }.AttachToDocument(); Native.Window.parent.With( xparent => { // http://stackoverflow.com/questions/5934538/is-there-a-limitation-on-an-iframe-containing-another-iframe-with-the-same-url parent = "" + xparent.document.location; new IHTMLPre { innerText = new { parent }.ToString() }.AttachToDocument(); } ); if (w < 400) { Native.Document.body.style.backgroundColor = JSColor.Yellow; new IHTMLButton("reopen as a bigger document").AttachToDocument().onclick += delegate { var src = location; if (location == parent) { var withouthash = src.TakeUntilIfAny("#"); var onlyhash = src.SkipUntilOrEmpty("#"); withouthash += "?"; if (onlyhash != "") { withouthash += "#" + onlyhash; } src = withouthash; } var iframe = new IHTMLIFrame { src = src, frameBorder = "0" }; iframe.style.minWidth = "800px"; iframe.style.minHeight = "600px"; iframe.style.position = IStyle.PositionEnum.absolute; iframe.style.left = "0px"; iframe.style.top = "0px"; iframe.style.width = "100%"; iframe.style.height = "100%"; Native.Document.body.Clear(); Native.Document.body.style.overflow = IStyle.OverflowEnum.hidden; iframe.onload += delegate { Console.WriteLine( new { location, iframe.src } ); iframe.style.minWidth = ""; iframe.style.minHeight = ""; }; Console.WriteLine( "will reload as: " + new { src } ); iframe.AttachToDocument(); }; return; } Native.Document.body.style.backgroundColor = JSColor.White; new IHTMLButton("this is dynamic content").AttachToDocument(); new IHTMLButton("reload").AttachToDocument().onclick += delegate { Native.Document.location = Native.Document.location; }; new IHTMLButton("add frame").AttachToDocument().onclick += delegate { var src = location; if (location == parent) { var withouthash = src.TakeUntilIfAny("#"); var onlyhash = src.SkipUntilOrEmpty("#"); withouthash += "?"; if (onlyhash != "") { withouthash += "#" + onlyhash; } src = withouthash; } var iframe = new IHTMLIFrame { src = "about:blank" }; iframe.style.position = IStyle.PositionEnum.absolute; iframe.style.left = "10%"; iframe.style.top = "10%"; iframe.style.width = "80%"; iframe.style.height = "80%"; iframe.AttachToDocument(); Console.WriteLine( "will frame as: " + new { src } ); Native.Window.requestAnimationFrame += delegate { iframe.src = src; Console.WriteLine( "did it work? " + new { iframe.src } ); }; }; new IHTMLButton("add frame via source").AttachToDocument().onclick += delegate { var iframe = new IHTMLIFrame { }; iframe.style.position = IStyle.PositionEnum.absolute; iframe.style.left = "10%"; iframe.style.top = "10%"; iframe.style.width = "80%"; iframe.style.height = "80%"; iframe.AttachToDocument(); var x = iframe.contentWindow.open("about:blank", "_self"); x.document.write("<script src='/view-source'></script>"); x.document.close(); }; @"Hello world".ToDocumentTitle(); // Send data from JavaScript to the server tier service.WebMethod2( @"A string from JavaScript.", value => value.ToDocumentTitle() ); }