TUniHTMLFrame - adding html at runtime

[jonas@pcsupport.nu]

I have a project where I need to build some html att runtime.

A part of the contents I'm trying to show is a Facebook timeline plugin.

The html code for the plugin is creaed at https://developers.facebook.com/docs/plugins/page-plugin.

 

If I set the html code at design time the contents is shown correctly, but if I set i dynamically at runtime the contents isn't show correctly - there is just an empty space with the url to the facebookpage, see the attached screen dump.

 

The html code:

<div id="fb-root"></div>

 

<script>

  (function(d, s, id) {

    var js, fjs = d.getElementsByTagName(s)[0];

    if (d.getElementById(id)) return;

    js = d.createElement(s); js.id = id;

    js.src = 'https://connect.facebook.net/sv_SE/sdk.js#xfbml=1&version=v3.1&appId=1802520233141884&autoLogAppEvents=1';

    fjs.parentNode.insertBefore(js, fjs);

  }

  (document, 'script', 'facebook-jssdk'));

</script>

 

<div class="fb-page" data-href="https://www.facebook.com/sbkattila"data-tabs="timeline" data-width="300" data-height="500" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false">

  <blockquote cite="https://www.facebook.com/sbkattila"class="fb-xfbml-parse-ignore">

    <a href="https://www.facebook.com/sbkattila">SBKAttila</a>

  </blockquote>

</div>

 

 

The program code:

procedure TMainForm.UniButton1Click(Sender: TObject);

var

  MemStream: TMemoryStream;

begin

  MemStream:= TMemoryStream.Create;

  HTMLFrame1.HTML.SaveToStream(MemStream);

  MemStream.Position:=0;

  HTMLFrame2.Html.LoadFromStream(MemStream);

  MemStream.Free;

end;

 

I have tried to use Repaint, Refresh, ReAilgn, Update methods for the UniHTMLFrame.

I have also tried to put the script spart of the html code in UniHTMLFrame.BeforeScript.

 

I have tried to use bothe Google Chrome an d Internet Explorer with the same result.

I'm using Delphi 10.2 Enterprise Update 3 and UniGui 1.10.0.1471 (full license).

 

I have attached a sample project(project1.zip) that shows the problem.

  

 

 

 

Project1.zip

[Ron]

See attached project, basically you can split the html and the JS.

procedure TMainForm.UniFormShow(Sender: TObject);
begin
  HTMLFrame2.HTML.Text:='<div id="fb-root"></div>'+
  '<div class="fb-page" data-href="https://www.facebook.com/sbkattila" data-tabs="timeline" data-width="300" data-height="500" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false">'+
  '<blockquote cite="https://www.facebook.com/sbkattila" class="fb-xfbml-parse-ignore">'+
  '  <a href="https://www.facebook.com/sbkattila">SBK Attila</a>'+
  '</blockquote>'+
  '</div>';


  UniSession.AddJS('(function(d, s, id) {  ' +
    'var js, fjs = d.getElementsByTagName(s)[0]; ' +
    'if (d.getElementById(id)) return; ' +
    'js = d.createElement(s); js.id = id;  ' +
    'js.src = "https://connect.facebook.net/sv_SE/sdk.js#xfbml=1&version=v3.1&appId=1802520233141884&autoLogAppEvents=1";  ' +
    'fjs.parentNode.insertBefore(js, fjs);  ' +
  '}   ' +
  '(document, "script", "facebook-jssdk"));');
end;

Project1.zip