当用户在iframe中导航时，强制iframe的父页面自动滚动到顶部？

iFrame加载问题当iFrame加载到客户端页面时，我们看到页面位置在跳转，并且在绝大多数情况下，我们看到页面上的页面焦点较低。这迫使必须向上滚动才能看到iframe应用程序。当用户在iframe中导航时，强制iframe的父页面自动滚动到顶部？

我试图通过使用来解决这个问题：

$（ 'HTML，身体'，window.parent.document）.animate（{ scrollTop的： '0像素' }， '快'）;

IFRAME ID =“clientID的”类=“广告” SRC =“https://www.our-application.com”

这不起作用，因为客户端的网站和我们的iframe的基于应用程序窗口都在不同的领域，所以我们无法直接访问window.parent中存在的跨域问题。

请建议如何解决这个问题请帮助

来源

2017-05-05 Rahul Joshi

可能重复[获取父页面滚动到顶部，当iframe的表单验证失败]（http://stackoverflow.com/questions/24911422/get-parent-page-to-scroll-to-top-when -iframes-form-validation-fails） –

这个答案只会工作，只要你可以添加一个JavaScript事件监听器父页面。

客户端页面上的'message'事件侦听器可以使用window.parent.postMessage()函数 - 请参阅下面的Mozilla文档。

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

的想法是，你的iframe中使用JavaScript来发布消息到父窗口。

父窗口包含一个事件侦听器，然后滚动到顶部。

您应特别注意上述文档中的安全问题。

这个答案提供了代码示例https://stackoverflow.com/a/24914498/7326037

在父窗口中，我有

function receiveMessage(e){ 

    console.log("Received Message: " + e); 

    if (e.originalEvent.origin === 'http://www.site.client.com') { 
    $("html, body").animate({ 
     scrollTop : 441 
    }, "fast"); 
    } 
} 
$(window).bind("message", receiveMessage);

，并添加了这个原始的js代码的iframe内容：

window.parent.postMessage("Scroll", "http://www.site.client.com/");

这会导致iframe发布一条由父级捕获的消息。由于这是发布的唯一消息，因此当且仅当域匹配时，才会使用它来触发滚动事件。

来源

2017-05-05 10:45:06

你好，谢谢你的建议但是我们不能说我们的客户端添加JavaScripts，而是我们只需要提供一个元素，它是** iframe id =“clientID”class =“ad”src =“https://www.our-application.com”**没有其他...任何解决方案，而不在客户端域添加任何东西？ –

正如您所提到的，您的iframe位于不同的域中，因此[同源策略]（https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy）将阻止您控制客户'窗口'。所以我认为，如果不在他们的网站中添加一个JavaScript侦听器，你可能无法实现这一点。 –

有没有其他建议？ –

当用户在iframe中导航时，强制iframe的父页面自动滚动到顶部？

回答

相关问题