mootools moopopup url option not working?

219 views Asked by At

I'm new to mootools, I am working on the demo example for moopopup but for me option url to load remote does not pop up.

<link href="moopopup.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="mootools-core-yc.js"></script>
<script type="text/javascript" src="mootools-more-yc.js"></script>
<script src="moopopup-yc.js" type="text/javascript"></script>

<script type="text/javascript">
    function runExample3() { 
        var mypopup3 = new moopopup({
            title: 'My home page',
            resizable: false,
            width: 800,
            max_body_height: 600,
            url: 'http://www.google.co.in/'
        });
        mypopup3.display();     
    }
</script>
</head>

<body onLoad="prettyPrint()">
<span class="button link" onclick="runExample3();">run javascript</span>
</body>

Here is the URL:

http://sasi.pro/searchsn/new/

1

There are 1 answers

4
Sergio On

Well you can't do what you want directly because of cross domain security. You cannot import another website into your own html. You can make ajax requests but you can not import http://www.google.co.in/ via ajax.

I'm not sure of how you will use the moopopup, but the only alternative I see is use the htmlnode option of the moopopup and load an iFrame into it. In that case it will work and you just have a bit of CSS work left. Still, some websites do not allow showing themselves in a iFrame, Google is one of them.

DEMO HERE

I made also small changes on your code, note that on your site/link your are calling a function prettyPrint() on page load that doesn't exist (maybe part of other code you have)...

Anyway my code in the demo:

HTML

<span class="button link">run javascript</span>
<div id="newiframe">
    <iframe src="http://www.yr.no" id="newiframe" />
</div>

CSS

#newiframe {
    display:none;
    width:770px;
    height:300px;
    overflow:auto;
}
.moopopup-body #newiframe {
    display:block;
}

Script

var myIframe = document.id('newiframe');
function runExample3() {
    var mypopup3 = new moopopup({
        title: 'My home page',
        resizable: false,
        width: 800,
        max_body_height: 600,
        html_node: myIframe
    });
    mypopup3.display();
}

document.getElement('.button.link').addEvent('click', runExample3);
//commented because it doesn't exist
// window.addEvent('domready', function() { prettyPrint();});