Page 1 of 1

append html code to div element in Webgadget ?

Posted: Wed May 09, 2018 7:11 pm
by ehbarba
Hi

How could i append html code to div element in Webgadget?

Thanks

Re: append html code to div element in Webgadget ?

Posted: Wed May 09, 2018 7:49 pm
by Peter
which Website do you want to display in the WebGadget? A publicly accessible? If so, can you post the link?

Greetings ... Peter

Re: append html code to div element in Webgadget ?

Posted: Wed May 09, 2018 8:12 pm
by ehbarba
Hi Peter

I want to append a button at the end of a div element containes in the already loaded page on a webgadget.

The page loaded in the webgadget is like this: http://www.multysite.com/multysite/inde ... T000000002&

It has a <div id="multysite">...content ...</div> element.

In certain cases (not always) I need to append a button at the end of the #multysite element content.

By the way, that button has to call a SB procedure in my program.

Thanks in advance for your help

Re: append html code to div element in Webgadget ?

Posted: Wed May 09, 2018 8:59 pm
by Peter
for security reasons it is not possible to access the content of an iFrame (WebGadget()), unless both sites (your SpiderBasic-site and the site you want to display in the Webgadget) are from the same origin.

Otherwise you will get the error-Message: "Blocked a frame with origin from accessing a cross-origin frame."

Do you have access to the web server on which the WebGadget-Site is running? Then you can allow cross-origin by adding the Header-Variable "Access-Control-Allow-Origin".

Greetings ... Peter

Re: append html code to div element in Webgadget ?

Posted: Wed May 09, 2018 10:06 pm
by ehbarba
Yes I own the site

How do I add the "Access-Control-Allow-Origin" variable?

Is it a directive that I can add in the HTML header?

Re: append html code to div element in Webgadget ?

Posted: Wed May 09, 2018 10:49 pm
by ehbarba
Ok, I added <meta http-equiv="Access-Control-Allow-Origin" content="*"> to the page header.

Is that the requirement to have access to the page elements in WebGadget?

If so, my problem is how to append a button element to a known div element in this page once it is loaded in a webgadget?

Thanks Peter for your kind attention

Re: append html code to div element in Webgadget ?

Posted: Thu May 10, 2018 9:20 pm
by Peter
Hello ehbarba,
ehbarba wrote:Is that the requirement to have access to the page elements in WebGadget?
yes, this is the mandatory requirement for the following code as a basis for further experiments:

Code: Select all

EnableExplicit

Enumeration
  #Window
  #WebGadget
  #ButtonGadget
EndEnumeration

OpenWindow(#Window, 0, 0, 1000, 800, "WebGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
WebGadget(#WebGadget, 0, 0, 1000, 800, "[YourSite]") ; important: [YourSite] must allow cross-origin access

; let's create a button, that will appear after the last div-element:
ButtonGadget(#ButtonGadget, 10, 10, 200, 30, "SpiderBasicButton")

Define WGID = GadgetID(#WebGadget)
Define BGID = GadgetID(#ButtonGadget)

! var iframe = v_wgid.gadget;

! iframe.onload = function() { // wait until the page is loaded

!   // Inject SpiderBasic-CSS into the iframe, so the Button looks like a SpiderBasic-Button:
!   var cssLink = document.createElement("link");
!   cssLink.href = "/spiderbasic/libraries/javascript/dojo/themes/flat/flat.css"; 
!   cssLink.rel = "stylesheet"; 
!   cssLink.type = "text/css"; 
!   iframe.contentDocument.body.appendChild(cssLink);

!   // find the Parent-Div:
!   var panesDiv = $(iframe).contents().find("#Panes"); // i took the #Panes-Identifier based on http://www.multysite.com/multysite/inde ... 000000002&

!   // find the last Div in the Parent-Div:
!   var lastDiv  = panesDiv.find("div").last();

!   require(["dojo/dom-construct"], function(domConstruct){
!     domConstruct.place(v_bgid.gadget.domNode, lastDiv[0], 2); // place the button after the last div
!   });

! }
Greetings ... Peter

Re: append html code to div element in Webgadget ?

Posted: Fri May 11, 2018 2:38 am
by ehbarba
Peter you are great, thank you. I will try this...