Jump to content

TUniHTMLFrame - adding html at runtime


Recommended Posts

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;
    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.

  
 

 

 

post-6579-0-05059100-1534003987_thumb.jpg

Project1.zip

Link to post
Share on other sites

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

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...