Focus with Cross-domain Ajax in Opera_问答_开发者

You'll need Opera 9.62 to see what this is all about... Because that is the only browser that behaves strange when I do cross-sub-domain JavaScript calls (with Ajax involved). Please consider the following three simple files and place them at appropriate domains.

foo.html (parent of boo.html iframe) at foo.example.com

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>foo</title>
<script type='text/javascript'>

    document.domain = 'example.com';

    function sendRequest() {
        window.frames['boo'].sendRequest();
    }

</script> 
<head>
<body>

    <input type="submit" value="sendRequest" onclick="se开发者_Go百科ndRequest();" />

    <iframe name="boo" src="http://boo.example.com/boo.html"></iframe>

</body>
</html>

boo.html (iframe of foo.html) at boo.example.com

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>boo</title>
<script type='text/javascript'>

    document.domain = 'example.com';

    function sendRequest() {
        var request = null;

        if (window.XMLHttpRequest) { 
            request = new XMLHttpRequest(); 
        } else { 
            request = new ActiveXObject('Microsoft.XMLHTTP'); 
        }

        if (request) {
            request.open('GET', 'http://boo.example.com/helloworld.php', true); 

            request.onreadystatechange = function() {      
                if (request.readyState == 4) {
                    var result = request.responseText;

                    alert(result);
                }
            }

            request.send('');
        }
    }

</script> 
<head>
<body>
</body>
</html>

helloworld.php at boo.example.com

<?php
    echo 'Hello World!';
?>

If you test the above-stated code in browsers other than Opera (tested on v9.62), it works like a charm (I have tested in Safari, Firefox, Chrome). In Opera, it does not work and an error with security violation message is thrown. Does anybody know what the matter is? I have found out a solution to the problem and I will post it here a bit later (I'd also like to see your solutions), but I'd like to learn more about the issue as well - can anybody explain it?

UPDATE: I just tested it on the newest Opera 10.63 and it does not have such a problem. So you'll definitely need to use Opera v9.62 to observe the problem.

Think that version of Opera does not support document.domain

I know that none of the Opera versions before 9 supported it, so I'm guessing 9.62 doesn't support it either.

Try setting domain to boo.example.com, and see if that works, just in case 9.62 does support it.

According to http://www.opera.com/docs/specs/opera9/xhr/, it does support XMLHttpRequest just fine, and since it follows W3C specifications, var request = new XMLHttpRequest() should work fine.

I was going to suggest you implement CORS but that seems not to be implemented yet: http://dev.opera.com/forums/topic/693452

Let me show you the code that does work in Opera 9.62...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>boo</title>
<script type='text/javascript'>

    document.domain = 'example.com';

    function sendRequest() { 
        setTimeout(function() {
            var request = null;

            if (window.XMLHttpRequest) { 
                request = new XMLHttpRequest(); 
            } else { 
                request = new ActiveXObject('Microsoft.XMLHTTP'); 
            }

            if (request) {
               request.open('GET', 'http://boo.example.com/helloworld.php', true); 

               request.onreadystatechange = function() {                  
                    if (request.readyState == 4) {
                       var result = request.responseText;

                       alert(result);
                    }
                }

                request.send('');
            }
        }, 1);
    }

</script> 
<head>
<body>
</body>
</html>