使用指定的#element加載iframe將父視點移動到同一位置

我使用此javascript將滾動到所需區域的網頁加載到中。但是，無論何時加載給定的iframe，視口都會立即跳轉到該點，就像我在URL的末尾使用#asContainer一樣。使用指定的#element加載iframe將父視點移動到同一位置

HTML：

<h3>Audiosurf</h3> 
<div id="asContainerWrapper"> 
    <iframe id="asContainer" scrolling="no"></iframe> 
</div>

的JavaScript：

$(document).ready(function(){ 
    $('#asContainer').attr('src','//audio-surf.com/mypage.php?u=DJDavid98#favorites_container'); 
});

來源

2013-01-22 SeinopSys

與第一個答案工作，我想出了這一點：

http://jsfiddle.net/UZZ4c/1/

正如你可以看到它只是隱藏和顯示的iframe，而它的裝載和rescrolling前戲。

我的第一個想法是你不需要滾動。 iframe元素在加載時不可見並且瀏覽器不應滾動到錨點http://jsfiddle.net/UZZ4c/2/但是我沒有測試這個理論，所以我會把它留給你。

我的確建議您在隱藏iframe的地方放置一個加載器。

#asContainer { display: none; } 

$(document).ready(function() { 
    $('#asContainer').attr("src", "//audio-surf.com/mypage.php?u=DJDavid98#favorites_container").on('load', function() { 
     $(this).show(); 
    }); 
});

來源

2013-01-22 19:50:01 rlemon

實際上有一個加載程序，作爲'背景圖像' ＃asContainerWrapper'。 – SeinopSys

這是一個很好的解決方案（upvoted）。比我最後提出的要好得多：http://jsfiddle.net/ahtLr/ – Dean

啊，天才它的作品。雖然你的小提琴似乎有一個滾動在負載頂部。只要你在加載iframe時顯示：none，父窗口就不會滾動（在Chrome中測試），這正是我想要的行爲。 – Jonathon

沒有什麼可以做這件事。問題在於您使用錨點來移動頁面鏈接到源站點的方式。演示與正常網站：

$(document).ready(function(){ 
    $('#asContainer').attr("src","http://www.lolwut.com"); 
});

http://jsfiddle.net/WGZUj/

演示與您正在試圖嵌入網站：

$(document).ready(function(){ 
    $('#asContainer').attr('src','//audio-surf.com/mypage.php?u=DJDavid98#favorites_container'); 
});

http://jsfiddle.net/UZZ4c/

一種策略來解決這個問題在理論上會檢測何時加載iframe，然後移回原始位置，但這是不可能的。

來源

2013-01-22 18:38:03 Dean

不，問題出在URL末尾的'＃'選擇器。您的示例網站加載應用程序的方式，因爲您沒有使用任何ID選擇器。 – SeinopSys

大衛，我更新了我的答案，以澄清這一點。通過說問題出在源站點，我沒有指出錨點。我希望OP會注意到;-)但是我的觀點仍然表明，他無法做任何事情，因爲他鏈接到此頁面上的錨點以顯示它的特定視圖。除去它，它不會顯示他想要什麼，他想要什麼。 – Dean

嗯，我是OP xD無論如何，你完全確定沒有辦法解決這個問題嗎？ – SeinopSys

使用指定的#element加載iframe將父視點移動到同一位置

回答

相關問題