用嵌入式圖像打開新窗口

我試圖打開一個新窗口，在原始頁面上單擊圖像時顯示單擊的嵌入圖像的較大版本。這可能嗎？用嵌入式圖像打開新窗口

我試過類似以下的東西（我現在沒有實際的代碼，但希望你能看到我想要做的）但窗口打開時沒有圖像，只是一個空白頁面。

嵌入式圖像數據也只是一個例子。真實情況下，大圖像和小圖像實際上是不同的。

<a href="data:image/png;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/ 
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp 
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNg YPj/gAwXEQA7"> 
<img onclick="var largeImgSrc=parentNode.href; 
window.open(largeImgSrc,"width=400,height=300"); 
return false;" src="data:image/png;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/ 
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp 
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7"></img> 
</a>

因此，我將更大的圖像源存儲在錨點的href屬性中。單擊圖像時，應發送onclick事件並執行javascript，以打開包含圖像的新窗口。

由於它打開窗口，但沒有顯示任何東西我在想，使用數據源uri而不是實際圖像的鏈接有問題。

來源

2015-09-17 Paul

這將是更具可讀性，如果JavaScript是在一個單獨的部分（而不是在線與您的HTML） - 你允許這樣做嗎？ – ochi

我也建議不要在你的屬性和值的周圍放置空格。同胞程序員的可讀性受到傷害。 –

單詞「width」關閉onclick屬性之前的第一個引號標記"，打破了您的功能。你可以清理它或創建一個函數來以通用的方式處理它們。

<a href = "data:image/png;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/ 
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp 
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNg YPj/gAwXEQA7"> 
<img onclick="fruitloop(this)" src = "data:image/png;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/ 
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp 
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7"></img> 
</a> 
<script> 
    function fruitloop(that){ 
     var largeImgSrc = that.parentNode.href; 
     console.log(largeImgSrc) 
     window.open(largeImgSrc,"width = 400, height = 300"); 
     return false; 

    } 
</script>

來源

2015-09-17 20:05:41 Shanimal

對OP的建議以及完美的答案：由於URL在'href'和'src'屬性中是相同的，所以可能只是簡單地執行'var largeImgScr = that.src;'也可以做到這一點複製dataURI兩次並膨脹代碼）。 –

真實的圖像是不相同的 - 我應該在我的OP中說清楚，對不起！我也沒有看到除了重構之外，它和我原來的帖子有什麼不同，使它更清晰。 – Paul

@PaulGothard你原來的帖子包含錯誤 - 這個回答不等於你的帖子的1比1（詳見我的回答） – ochi

在代碼中，你有以下：

onclick="var largeImgSrc=parentNode.href; window.open(largeImgSrc,".....

你的雙引號在window.open(largeImgSrc," <- this one調用正在關閉由onclick=" <- this one啓動的一個基本離開JS代碼不完全的休息。

你的窗口打開，但功能不正常，所以事情失敗，速度很快（你甚至可能因爲控制檯錯誤 - 如果你還沒有，我會感到驚訝）。

這是一種很難檢測到的東西，當一切都像你在示例代碼中那樣內聯。

因此，爲便於閱讀，我打破了JS到一個單獨的功能添加到onclick的href而不是像

注：下面的代碼是沙箱，它不會打開一個新的窗口。您將需要嘗試這種在自己的網頁/代碼

function openImg() { 
 
    var largeImgSrc = "data:image/png;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7" 
 

 
    window.open(largeImgSrc, "title here", "width=400, height=300"); 
 
    return false; 
 

 
}

<a href="#" onclick="openImg()"> 
 
    <img src="data:image/png;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/ 
 
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp 
 
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNg YPj/gAwXEQA7" /> 
 
</a>

來源

2015-09-17 20:08:34 ochi

用嵌入式圖像打開新窗口

回答

相關問題