append html code to div element in Webgadget ?

Just starting out? Need help? Post your questions and find answers here.
ehbarba
Posts: 31
Joined: Thu Mar 29, 2018 2:20 am

append html code to div element in Webgadget ?

Post by ehbarba »

Hi

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

Thanks
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: append html code to div element in Webgadget ?

Post by Peter »

which Website do you want to display in the WebGadget? A publicly accessible? If so, can you post the link?

Greetings ... Peter
ehbarba
Posts: 31
Joined: Thu Mar 29, 2018 2:20 am

Re: append html code to div element in Webgadget ?

Post 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
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: append html code to div element in Webgadget ?

Post 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
ehbarba
Posts: 31
Joined: Thu Mar 29, 2018 2:20 am

Re: append html code to div element in Webgadget ?

Post 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?
ehbarba
Posts: 31
Joined: Thu Mar 29, 2018 2:20 am

Re: append html code to div element in Webgadget ?

Post 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
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: append html code to div element in Webgadget ?

Post 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
ehbarba
Posts: 31
Joined: Thu Mar 29, 2018 2:20 am

Re: append html code to div element in Webgadget ?

Post by ehbarba »

Peter you are great, thank you. I will try this...
Post Reply