Question

我是mootools的新手，我正在研究moopopup的演示示例，但对我来说，选项url加载远程不会弹出。

<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>

以下是网址：

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

Answer 1

由于跨域安全性，您无法直接执行所需操作。您无法将其他网站导入您自己的HTML。您可以发出ajax请求，但无法通过ajax导入http://www.google.co.in/。

我不确定你将如何使用moopopup，但我看到的唯一选择是使用moopopup的htmlnode选项并加载iFrame。在这种情况下它会工作，你只需要一点CSS工作。不过，有些网站不允许在iFrame中展示自己，谷歌就是其中之一。

<强> DEMO HERE

我对您的代码做了一些小改动，请注意，在您的网站/链接上，您在页面加载时调用的函数prettyPrint()并不存在（可能是您拥有的其他代码的一部分）。

无论如何我在演示中的代码：

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;
}

脚本

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();});

mootools moopopup网址选项无法正常工作？

1 个答案: