How to open external link and center on page?

[Basem]

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!

[Alex Gyoshev]

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

[Basem]

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/

[Basem]

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.

[HaBo]

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

[HaBo]

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/"
    });
});

 

[HaBo]

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/"
    });
});

 

[Ivan Danchev]

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