How to open external link and center on page?

8 posts, 0 answers
  1. Basem
    Basem avatar
    27 posts
    Member since:
    Dec 2010

    Posted 30 Jun 2012 Link to this post

    I am trying to use the window widget to open http://google.com for example and display in the center of the page. I tried the code below, but it does not do anything (no errors either). I also tried adding it to an existing element on the page, $('#window'), but displays a blank white window.

    $('<div />').kendoWindow({
      content: 'http://google.com',
      iframe: false,
      modal: true
    }).data('kendoWindow').center();

    I would like to use it similar to how the AJAX RadControl Window is used: http://demos.telerik.com/aspnet-ajax/window/examples/default/defaultcs.aspx

    Any help would be greatly appreciated!
  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 02 Jul 2012 Link to this post

    Hello Basem,

    Opening external websites requires an iframe to be used -- the snippet doesn't work because it attempts to make a cross-domain request that is shot down by the browser. Specifying iframe: true should solve the problem.

    All the best,
    Alex Gyoshev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Basem
    Basem avatar
    27 posts
    Member since:
    Dec 2010

    Posted 02 Jul 2012 Link to this post

    I initially tried this but failed with the error : Refused to display document because display forbidden by X-Frame-Options.

    According to the other forum posts, there is some weird check that is happening in KendoUI so it was told to make iframe: false to get around it. Something definitely seems off. Please take a look at this live example: http://jsfiddle.net/zq5eC/
  4. Basem
    Basem avatar
    27 posts
    Member since:
    Dec 2010

    Posted 02 Jul 2012 Link to this post

    Wait, this seems to be a restriction by Google! It seems they do not allow this for any of their sites including maps. I tried other sites and it works though: http://jsfiddle.net/zq5eC/1/ . Although not a general solution, Google maps particular requires you add &output=embed
    in the URL. I hope this saves others some frustration.
  5. HaBo
    HaBo avatar
    34 posts
    Member since:
    Oct 2011

    Posted 31 May 2018 Link to this post

    This is not working for me either. I checked this JS Fiddle http://jsfiddle.net/zq5eC/1/  it is not working.

    How can I get this workign?

    Ref Doc: https://docs.telerik.com/kendo-ui/controls/layout/window/overview#configuration-Use

  6. HaBo
    HaBo avatar
    34 posts
    Member since:
    Oct 2011

    Posted 31 May 2018 Link to this post

    Looks like this is not working for any social media links

    $(function() {
        $("#window").kendoWindow({
            iframe: true,
            content: "https://www.facebook.com/"
        });
    });

     

    $(function() {
        $("#window").kendoWindow({
            iframe: true,
            content: "https://twitter.com/"
        });
    });

     

  7. HaBo
    HaBo avatar
    34 posts
    Member since:
    Oct 2011

    Posted 31 May 2018 Link to this post

    Looks like this is not working for any social media links

    $(function() {
        $("#window").kendoWindow({
            iframe: true,
            content: "https://www.facebook.com/"
        });
    });

     

    $(function() {
        $("#window").kendoWindow({
            iframe: true,
            content: "https://twitter.com/"
        });
    });

     

  8. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2059 posts

    Posted 05 Jun 2018 Link to this post

    Hello,

    This is not an issue related to Kendo UI. It is caused by the response headers sent by certain websites (as in your example Facebook and Twitter's sites), which prevent the browser from displaying them in an iframe. As you can see in this dojo example the same occurs if you use standard iframe element without using any Kendo UI widgets (screenshot).

    Regards,
    Ivan Danchev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top