Question

我正在尝试创建一个可以嵌入其他网站（并且具有响应性）的测验，与YouTube嵌入的方式相同。点击iframe时，我希望它适合移动屏幕的视口。这是可能的，我该如何实现呢？

目前我已经尝试制作响应式全屏Bootstrap模式加载iframe，但问题是我们不控制父页面内容，除了一小块嵌入代码（因为这将嵌入，我不能做任何对父网页中包含的库的假设等）

<div>
   <iframe src="http://server/quiz/embed/{{quiz_id}}" style="" frameBorder="0" width="100%" height="768"></iframe>
</div>

Answer 1

一般来说：不。更改iframe的大小是对父站点的DOM的修改。对于您当前使用的嵌入代码，这是不可能的，因为跨源限制会阻止在您的框架内运行的代码访问父窗口。^†

您的选择是：

更改您的嵌入代码。让您的用户嵌入对动态生成的Javascript文件的引用，该文件设置跨域访问（例如，使用window.postMessage），然后创建一个类似于当前嵌入的iframe标记。
完全使用其他解决方案。请考虑使用window.open或<a target="_blank">来创建“普通”弹出窗口;这不需要在您的框架上进行特殊设置。

†：也就是说，除非巧合碰巧与嵌入内容的原点相同。但在一般情况下这不太可能。