contentWindow for iframe is null

11 posts, 0 answers
  1. Joseph
    Joseph avatar
    135 posts
    Member since:
    Sep 2007

    Posted 22 Jul 2010 Link to this post

    Hi,

    I have an HTMlPlaceHolder place on an aspx page.

    when I try to execute this code to call a javascript function inside the placeholer I get that contentWindow is null

    here is the code :

      HtmlElement iframe = (HtmlElement)this.HtmlPlaceHolder.HtmlPresenter.Children[0];

       iframe.SetAttribute("id", "myIFrame");
             
        string code = string.Format("document.getElementById('myIFrame').contentDocument.HighLightSegment({0});", segmentID);

        HtmlPage.Window.Eval(code);


  2. Valentin.Stoychev
    Admin
    Valentin.Stoychev avatar
    2198 posts

    Posted 23 Jul 2010 Link to this post

    Hello Joseph,

    You need to execute this code after the page has been loaded.

    Also I see that you are using a contentDocument instead of contentWindow here:
    string code = string.Format("document.getElementById('myIFrame').contentDocument.HighLightSegment({0});", segmentID);

    Regards,
    Valentin.Stoychev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft banner
  4. Joseph
    Joseph avatar
    135 posts
    Member since:
    Sep 2007

    Posted 23 Jul 2010 Link to this post

    Hi Sir,

    Yes, the code is executed when I click a button in Silverlight to select an element inside the HTML DOM of the HTMLPlaceHolder.

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        this.SelectSegment(1);
    }
    public void SelectSegment(int segmentID)
          {
              // Get the IFrame from the HtmlPresenter
              HtmlElement iframe = (HtmlElement)this.HtmlPlaceHolder.HtmlPresenter.Children[0];
              // Set an ID to the IFrame so that can be used later when calling the javascript
              iframe.SetAttribute("id", "myIFrame");
              // Code to be executed
             
              string code = string.Format("document.getElementById('myIFrame').contentWindow.HighLightSegment({0});", segmentID);
     
              //string code = "for(i=0;i<document.getElementById('myIFrame').document.all.length;i++) { alert(document.getElementById('myIFrame').document.all(i).tagName);}";
     
              HtmlPage.Window.Eval(code);
     
          }

    The weird thing is that the HtmlElement iframe element has its tagName property = 'Html' and not 'iframe'.

    That's explain why contentWindow won't execute.

    the xaml presentation is as follows :

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
             
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
         
        <Button x:Name="btnSelect" Content="Select" Height="20" Click="Button_Click" />
        <telerik:RadHtmlPlaceholder  Grid.Row="1" x:Name="htmlPreviewer">
             
             
        </telerik:RadHtmlPlaceholder>
     
    </Grid>

    I feed the HtmlPlaceHolder using the HtmlSource.


    Any tips ?
  5. Valentin.Stoychev
    Admin
    Valentin.Stoychev avatar
    2198 posts

    Posted 23 Jul 2010 Link to this post

    Hello Joseph,

    When you are using the HtmlSource property and feed the control with html string we are not creating IFRAME element, but a DIV element to wrap the content. You can try examining the DOM tree with the IE Developer Tools to see how is the tree populated.

    Sincerely yours,
    Valentin.Stoychev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. Joseph
    Joseph avatar
    135 posts
    Member since:
    Sep 2007

    Posted 23 Jul 2010 Link to this post

    Yes I noticed that.

    How can I then execute a javascript method inside the HTMlPlaceHolder ?
  7. Valentin.Stoychev
    Admin
    Valentin.Stoychev avatar
    2198 posts

    Posted 23 Jul 2010 Link to this post

    Hi Joseph,

    nothing special - you need to use the html bridge and to execute your code, just make sure that this happens after the html placeholder is rendered. You can read here for more info on html bridge:
    http://msdn.microsoft.com/en-us/library/cc221359(v=VS.95).aspx

    Kind regards,
    Valentin.Stoychev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  8. Joseph
    Joseph avatar
    135 posts
    Member since:
    Sep 2007

    Posted 23 Jul 2010 Link to this post

    Hi, 

    Thanks for the help.

    The javascript functions are written to query the text inside the HtmlPlaceHolder.

    If I place the functions inside the .aspx page where the Silverlight control object is hosted I can call them but I cannot query the text inside the HtmlPlaceholder because it is inside the object.

    If I inject these javascript functions inside the Text that feeds the HtmlPlaceHolder, I think I cannot call them using HtmlBridge because the aspx page will render only the Silverlight object as an object so the Html Text inside the HtmlPlaceholder will not appear.

    when I right click and view page source I only see the silverlight object. but when I inspect elements inside the HtmlPlaceHolder I can see the text inside ( Black Box).

    I hope u understand my point.



  9. Valentin.Stoychev
    Admin
    Valentin.Stoychev avatar
    2198 posts

    Posted 23 Jul 2010 Link to this post

    Hi Joseph,

    --- qte ---
    The javascript functions are written to query the text inside the HtmlPlaceHolder.

    If I place the functions inside the .aspx page where the Silverlight control object is hosted I can call them but I cannot query the text inside the HtmlPlaceholder because it is inside the object.
    ---/ qte ---

    When html is rendered from the HtmlPlaceholder the html elements are accessible from the javascript methods rendered in the aspx page. They are part from the page DOM, so you should not hit problems with this. Please give it a try and let us know the result.

    Greetings,
    Valentin.Stoychev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  10. Joseph
    Joseph avatar
    135 posts
    Member since:
    Sep 2007

    Posted 23 Jul 2010 Link to this post

    When I open the .aspx page I only see the Silverlight object and I cannot see the Html of the HtmlPlaceHolder. ( The HtmlPlaceHolder visibly renders the html ).

    Here is the source :

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <title>
        Previewer
    </title>
        <style type="text/css">
        html, body {
            height: 100%;
            overflow: auto;
        }
        body {
            padding: 0;
            margin: 0;
        }
        #silverlightControlHost {
            height: 100%;
            text-align:center;
        }
        </style>
        <script type="text/javascript" src="Silverlight.js"></script>
        <script type="text/javascript">
            function onSilverlightError(sender, args) {
                var appSource = "";
                if (sender != null && sender != 0) {
                  appSource = sender.getHost().Source;
                }
                 
                var errorType = args.ErrorType;
                var iErrorCode = args.ErrorCode;
      
                if (errorType == "ImageError" || errorType == "MediaError") {
                  return;
                }
      
                var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;
      
                errMsg += "Code: "+ iErrorCode + "    \n";
                errMsg += "Category: " + errorType + "       \n";
                errMsg += "Message: " + args.ErrorMessage + "     \n";
      
                if (errorType == "ParserError") {
                    errMsg += "File: " + args.xamlFile + "     \n";
                    errMsg += "Line: " + args.lineNumber + "     \n";
                    errMsg += "Position: " + args.charPosition + "     \n";
                }
                else if (errorType == "RuntimeError") {          
                    if (args.lineNumber != 0) {
                        errMsg += "Line: " + args.lineNumber + "     \n";
                        errMsg += "Position: " +  args.charPosition + "     \n";
                    }
                    errMsg += "MethodName: " + args.methodName + "     \n";
                }
      
                throw new Error(errMsg);
            }
        </script>
      
      
            
        
    </head>
    <body>
        <form method="post" action="PreviewerTestPage.aspx" id="form1" style="height:50%">
    <div class="aspNetHidden">
    <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzgzNDMwNTMzZGROlGsRMlzy2/qWAlYk5luUdM+GpHwjB6LR9psmFMc5qg==" />
    </div>
      
      
         <script type="text/javascript" language="javascript">
      
             var previousSegment = 0;
      
             function HighLightSegment(segmentID) {
                 debugger;
                 if (segmentID != null) {
      
                     var segment = document.getElementById(segmentID);
      
                     if (segment != null) {
      
                         segment.className = "Decorate";
      
                         var topPos = segment.offsetTop;
      
                         $('#scrollingDiv').scrollTop(topPos);
      
                         if (previousSegment != null && previousSegment != segment) {
                             previousSegment.className = "";
                             previousSegment = segment;
                         }
                     }
                 }
             }
      
             function UpdateSegment(segmentID, text) {
      
                 if (segmentID != null) {
      
                     var segment = $("#" + segmentID);
      
                     if (segment != null) {
      
                         segment.html(text);
                     }
      
                 }
             }
      
        </script>
      
        <div id="silverlightControlHost">
            <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
              <param name="source" value="ClientBin/Previewer.xap"/>
              <param name="onError" value="onSilverlightError" />
              <param name="background" value="white" />
              <param name="minRuntimeVersion" value="4.0.50401.0" />
              <param name="windowless" value="true" />
              <param name="autoUpgrade" value="true" />
              <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
                  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
              </a>
            </object></div>
      
             
          
        </form>
    </body>
      
      
    </html>

    As you can see, HighLightSegment method should call elements inside the HtmlPlaceHolder, but they are not rendered on this page.

    The Html Text I gave to PlaceHodler starts with <div id="container"> .

    I used HtmlPage.Window.Invoke("HighLightSegment", "1"); It get invoked but I can't get the inner elements of the PlaceHolder.

    Sorry for this mess, but I am trying to find a solution for it.

    All I want is to be able from Silverlight, manipulate elements inside the Html Text of the placeholder.

    Thanks



  11. Joseph
    Joseph avatar
    135 posts
    Member since:
    Sep 2007

    Posted 23 Jul 2010 Link to this post

    Ok I found a solution.

    I stored the Html Text inside a .html file and called the following code :

    this.HtmlPlaceHolder.SourceUrl = new Uri("TextFile.html",UriKind.Relative);

    One thing remains, I want to store this file in IsoStorage so the client doesn't download it twice. so next time we read the file from Isolated Storage and feed it to the HtmlPlaceHolder. is this possible?



    Thanks
  12. Miroslav
    Admin
    Miroslav avatar
    922 posts

    Posted 29 Jul 2010 Link to this post

    Hello Joseph,

    Yes, it is possible - you can download the html file as text and save it.

    All the best,
    Miroslav
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top
DevCraft banner