Javascript - 獲取框架元素到根父框架的協調

我想獲得X按鈕與圖片中的根文檔的協調。Javascript - 獲取框架元素到根父框架的協調

我嘗試使用jQuery的offsetLeft，但是它只返回當前幀的x：

$(window).on('click', 
    function(e){ 
     console.log("x: " + e.target.offsetLeft); 
    } 
);

http://i.imgur.com/Fdfr31x.jpg

所以我想知道，有沒有方法在這種情況下直接獲得x？

來源

2017-05-08 Zero-IT

也許使用'$（document）'而不是'$（window）'？ – Huelfe

嘗試

$("button").on('click', function() 
{ 
// Your code 
});

在這種情況下，x的值將是8作爲主體的默認餘量是8像素。

$("button").on('click', 
 
    function(e) { 
 
    console.log("x: " + e.target.offsetLeft); 
 
    } 
 
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>Button</button>

來源

2017-05-08 08:11:33

你的方法只返回當前幀的x。 –

你可以讓ith清楚嗎？ –

標籤本身是一個單獨的文檔。所以當你得到offsetLeft時，它只能取當前文檔/框架的x（在我的圖片中是第3列）。 –

一個javascript添加到每個文件：

$(window).on('click', 
    function(e) { 
    console.log(getLeft()+e.target.offsetLeft); 
    } 
); 

function getLeft() { 
    if (window.parent!=window) { 
    var result="foo"; 
    $(window.parent.document).find("iframe").each(function() { 
     if ($(this)[0].contentWindow==$(window)[0]) { 
     result=this.offsetLeft+window.parent.getLeft(); 
     } 
    }); 
    if (result!="foo") return result; 
    } 
    return 0; 
}

含test2.html一個HTML的樣本是：

<html> 
<head> 
<style> 
    iframe { 
    position: absolute; 
    left: 50%; 
    top: 0px; 
    width: 50%; 
    height: 100%; 
    } 
</style> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="test.js"></script> 
</head> 
<body> 
    <button>foo</button> 
    <iframe src="test2.html"></iframe> 
</body> 
</html>

這是通過獲取位置來自父級的iframe。
如果您有任何疑問，請隨時對此發表評論:)

P.S. <frame>已過時/棄用。示例使用。

來源

2017-05-08 08:42:04

但在我的情況下，它有2個父母。我怎樣才能得到根父母？ –

嗨，理查德，謝謝你的回答。但似乎我們需要將包含'getLeft'方法的js文件插入到「每個」html文件中？在我的情況下，該項目只包含1個與瀏覽器交互的js文件（因爲我們不控制html文件，它可以是任何網頁）。因此，當我再次遇到代碼'window.parent.getLeft（）'時，它不能在父級中調用'getLeft'方法（因爲父級中沒有該方法）我想再次打擾你。 –

是的，您需要將js插入每個文件。如果你只能控制一個單獨的html，你可以嘗試通過一個文件的javascript動態地將腳本插入到它的父母/孩子。 –

Javascript - 獲取框架元素到根父框架的協調

回答

相關問題