javascript - 是否可以使用 IFRAME(无需重新加载页面)来模拟响应式设计的方向和尺寸变化？

Question

为了快速回答:我不是问如何根据内容调整 iframe 的大小，也不是问如何在开发时在浏览器中模拟响应式设计。

编辑:

我意识到，我正在使用“半负责”设计进行测试，需要在文档/正文上进行“调整大小”事件，但这不会触发，我无法触发 完全负责似乎有效

我希望我的客户有机会/感受他们的内容在智能手机上的外观(即响应式)

我不想将它们插入开发模式和浏览器详细信息。我的客户不是开发人员，也不是设计师。

因此，我将它们制作为“手机 - 预览”，用于打开带有某些手机尺寸的 iframe 弹出窗口。

这很好用。

客户还可以更改大小/方向，但这只有在我重新加载 iframe 的(原则上响应式)上下文时才能正常工作

有没有办法触发/推送(同一域)IFRAME 内容/渲染以对 IFRAME 的更改使用react？

我尝试调整主体大小，但这并不能改变情况。

那么这可能吗？

对于那些想查看一些来源的人(抱歉，是咖啡，但我认为逻辑很清楚)

display_change: =>
    horz=@$rotate.rm_get() #this is my way to read date from any input 0 or 1 here
    mt=@$mobile_type.rm_get('all') # this reads all data with the selection here [1, 'best phone', 'best phone', 300, 600] rendered into the select
    [w,h]=[mt[3],mt[4]]
    [w,h]=[h,w] if horz

    #ok width and height are here now.

    $iframe=@$form.find('iframe')
    .height(h)
    .width(w)

    # how to avoid force reload?
    $iframe.prop(src: $iframe.prop("src"))

Answer 1

您应该能够从 iframe 的内部或外部设置 iframe 的方向。从内部来看，我相信您可以手动设置 window.orientation 。从外部，您可以使用 postMessage 。

这是一个类似的 question/answer .