在jQuery UI对话框中动态加载本地HTML文件

Question

Load Local HTML Files Dynamically inside the jQuery UI Dialog

Here is my code below, I'm trying to load and display the content of wtf.html in the modal. But it doesn't show in Google Chrome 35, 36 nor IE, however, it works fine in Firefox 28 and 30..

We did I do wrong?

<div></div>

<script type="text/javascript">

$(function ()    {
    $('<div>').dialog({
        modal: true,
        open: function (){$(this).load('wtf.html');},         
        height: 400,
        width: 400,
        title: 'Dynamically Loaded Page'
    });
});

</script>

Answer 1

Nothing wrong. It is a known issue with Chrome. See here for details: https://code.google.com/p/chromium/issues/detail?id=40787

The same must be for IE. The best way to fix this issue is to use a Development web server. For Windows I would suggest Mongoose . It is small fast and lightweight.

PS: You can go around this issue in Chrome by launching Chrome with --disable-web-security flag, but it is not encouraged. Better to use a web server.

Answer 2

I think the key is you state these are local files. Some browsers block use of ajax when file is opened from file: protocol.

You should be able to adjust security settings to allow for it. Alternatively install a localhost server on your computer