logo标签列表

一个嵌套在另一个iframe中的iframe，这个可行吗？

javascriptjqueryhtmliframevimeo-api
6
我们有一个视频（vimeo）链接，希望用户观看。每个视频后面都会有一个简短的问卷调查。我们的意图是在用户点击打开视频观看之前不让问卷调查对用户可见。我只能想到将以下代码嵌入到另一个iframe中以隐藏链接。这可能吗？还有其他方法吗？
<!DOCTYPE HTML>
<html>
<head>
    <meta name="google" value="notranslate" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Dog Smoking</title>

    <style type="text/css">
    body {
        padding-top:0;
        padding-bottom:0;
        padding-left:0;
        padding-right:0;
        margin-top:0;
        margin-bottom:0;
        margin-left:0;
        margin-right:0;
    }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="javascript/froogaloop.js"></script>
    <script src="javascript/froogaloop.min.js"></script>
 <script type="text/javascript">
 var iframe = $('#player1')[0],
 player = $f(iframe),
 status = $('.status');

 // When the player is ready, add listeners for pause, finish, and playProgress
 player.addEvent('ready', function() {
     status.text('ready');

     player.addEvent('pause', onPause);
     player.addEvent('finish', onFinish);
     player.addEvent('playProgress', onPlayProgress);
 });

 // Call the API when a button is pressed
 $('button').bind('click', function() {
     player.api($(this).text().toLowerCase());
 });

 function onPause(id) {
     status.text('paused');
 }

 function onFinish(id) {
     status.text('finished');
 }

 function onPlayProgress(data, id) {
     status.text(data.seconds + 's played');
}
player.addEvent('ready', function() {
    status.text('ready');
    $("#survey_button").show(); // <-- or whatever
});
</script>
</head>
<body>
    <iframe src="http://player.vimeo.com/video/4644119?api=1" width="400" height="375" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    <a href="http://show.aspx?testid=27#activate"
    target="target-iframe"
    onclick="frames['target-iframe'].document.getElementById('activate')
    .scrollIntoView();return false">Click</a>
</body>
</html>
同源策略通过 iframe 防止跨域通信。 - Diodeus - James MacFarlane
1
也许你应该尝试使用Ajax和一些服务器端语言？ - Miljan Puzović
2个回答
2

简短回答

是的，你可以在一个iframe中嵌套另一个iframe。但从性能方面考虑，这通常不是一个好主意。

2

我会使用JS视频API并利用内置于播放器中的事件回调函数使问卷可见。

==更新==

好的-那个链接是一个逐步示例，说明如何将JS控件和回调函数合并到播放器中。但是...我们开始吧...

第一步是在初始嵌入代码后添加"?api=1"。

第二步是加载他们的Froogaloop库，以便您可以监听事件...

第三步是设置回调来处理您想要监听的任何事件...这个页面上的示例非常棒：

var iframe = $('#player1')[0],
player = $f(iframe),
status = $('.status');

// When the player is ready, add listeners for pause, finish, and playProgress
player.addEvent('ready', function() {
    status.text('ready');

    player.addEvent('pause', onPause);
    player.addEvent('finish', onFinish);
    player.addEvent('playProgress', onPlayProgress);
});

// Call the API when a button is pressed
$('button').bind('click', function() {
    player.api($(this).text().toLowerCase());
});

function onPause(id) {
    status.text('paused');
}

function onFinish(id) {
    status.text('finished');
}

function onPlayProgress(data, id) {
    status.text(data.seconds + 's played');
}

因此，根据您希望何时显示您的调查，您可以轻松获取其中之一...

player.addEvent('ready', function() {
    status.text('ready');
    $("#survey_button").show(); // <-- or whatever
});

有意义吗？

============= 另一次更新 ================

这里有一个可用的 fiddle: http://jsfiddle.net/QkGRd/10/。你可能想要了解一些关于嵌入资源以及 jsfiddle 的工作原理的知识。

嗨，这个链接不是很直观。请问你有一个具体的例子吗？ - Chidi Okeh
非常感谢。很抱歉这么晚才看到你的更改。昨晚我检查了一下，但没有看到任何东西。好的，请参见上面更新的代码。我可以看到视频，但也可以看到“点击”链接。我们的希望是将该链接隐藏在iframe内或以某种方式使其在用户观看视频后可用。我有遗漏什么吗？请参见上面更新的代码。 - Chidi Okeh
请问您能否提供一个 JSFiddle 或类似的工具？您需要编辑我的代码以使其与您的代码兼容... - panzhuli
非常感谢您的帮助。这是 JSFiddle 的链接，http://jsfiddle.net/QkGRd/1/如果链接只能在视频播放完成后显示，那就太棒了。我希望您能协助解决这个问题。 - Chidi Okeh
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接