C03
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>生成內嵌 HTML 代碼</title>
<style>
.form-container {
max-width: 600px;
margin: auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.form-container input,
.form-container button {
width: 100%;
padding: 10px;
margin: 5px 0 20px 0;
border-radius: 5px;
border: 1px solid #ddd;
box-sizing: border-box;
}
.form-container button {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
.form-container button:hover {
background-color: #45a049;
}
.output {
background-color: #f1f1f1;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
white-space: pre-wrap; /* Preserve whitespace */
}
</style>
</head>
<body>
<div class="form-container">
<h2>生成內嵌 HTML 代碼</h2>
<input type="text" id="page-url" placeholder="輸入網頁 URL">
<button onclick="generateAndCopyEmbedCode()">生成並複製 HTML</button>
<div class="output" id="embed-code"></div>
</div>
<script>
function generateAndCopyEmbedCode() {
const pageUrl = document.getElementById('page-url').value;
if (!pageUrl) {
alert('請輸入網頁 URL');
return;
}
// 生成內嵌的 HTML 代碼
const embedCode = `<iframe src="${pageUrl}" width="100%" height="600" frameborder="0"></iframe>`;
// 顯示生成的 HTML 代碼
const embedCodeElement = document.getElementById('embed-code');
embedCodeElement.textContent = embedCode;
// 將生成的 HTML 代碼複製到剪貼簿
navigator.clipboard.writeText(embedCode).then(() => {
alert('內嵌 HTML 代碼已複製到剪貼簿');
}).catch(err => {
console.error('複製到剪貼簿失敗', err);
alert('複製到剪貼簿失敗，請檢查控制台錯誤信息。');
});
}
</script>
</body>
</html>
頁:
[1]