在IFrame中运行Skrollr

Run Skrollr In IFrame

本文关键字：Skrollr 运行 IFrame      更新时间：2023-09-26

我试图在IFrame中运行一些非常简单的Skrollr动画。当我用简单的HTML填充IFrame时，Skrollr将错误输出到控制台(在FireFox中):

'Not well - formed'

我已经确认IFrame内容是正确的，如果它们不在IFrame和标准网页中，则运行良好。我已经确认了Skrollr javascript文件正在成功加载。所有的CSS, JS和图像都是在同一个域的父网页，所以没有跨域发生。当内容放置在IFrame中时，问题就会显现出来。这让我认为这是一个交叉脚本问题，或者Skrollr被编码为检测跨域/交叉脚本?

你知道哪里出了问题，我该如何克服吗?如果你愿意，我可以提供一个简单的例子。希望抓住Prinzhorn的注意，是的，我知道Skrollr目前没有维护，并且IFrame没有得到官方支持，但如果我有什么问题的想法，或者问题是什么，我可以分叉Skrollr并添加这个功能。

编辑:这是一个简单的JSFiddle示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tasks</title>
    <style>
        #main-container {
                width            : 1200px;
                height           : 1000px;
                background-color : #eee;
        }
        iframe {
            width: 100%;
            height: 100%;
            overflow: scroll;
        }
    </style>
</head>
<body>
    <div class="container text-center">
        <button id="load-btn">Load Iframe</button>
        <br/>
        <div id="main-container" class="text-center">
            <iframe id="mf-preview" frameborder="0"></iframe>
        </div>
    </div>
    <!-- Javascript files -->
    <script src="js/custom.js"></script>
</body> 
</html>

一切正常

当你的iframe的大小大于1000px时它会显示滚动条

例如:

<iframe id="mf-preview" src="http://onhax.net" frameborder="0"></iframe>

我已经添加了大于1200px的iframe的源添加完之后就会显示滚动条

在JSFiddle中检查

相关文章：