|
|
| خط ۳: |
خط ۳: |
| <head> | | <head> |
| <meta charset="UTF-8"> | | <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
| | <title>تست لینک‌های iframe در مدیاویکی</title> |
| <title>تست لینک‌های iframe</title> | |
| <style> | | <style> |
| body { | | body { font-family: Tahoma; padding: 20px; text-align: center; } |
| font-family: Tahoma, sans-serif;
| | iframe { width: 100%; height: 400px; border: 2px solid #3498db; } |
| background: #f5f5f5;
| | button { background: #3498db; color: white; padding: 10px 20px; border: none; margin: 10px; } |
| padding: 20px;
| |
| text-align: center;
| |
| }
| |
| .container {
| |
| max-width: 800px;
| |
| margin: 0 auto;
| |
| background: white;
| |
| padding: 20px;
| |
| border-radius: 10px;
| |
| box-shadow: 0 0 10px rgba(0,0,0,0.1);
| |
| }
| |
| iframe { | |
| width: 100%;
| |
| height: 300px;
| |
| border: 2px solid #3498db;
| |
| border-radius: 5px;
| |
| margin: 20px 0;
| |
| }
| |
| button { | |
| background: #3498db;
| |
| color: white;
| |
| border: none;
| |
| padding: 10px 20px;
| |
| border-radius: 5px;
| |
| cursor: pointer;
| |
| margin: 10px;
| |
| }
| |
| .result {
| |
| margin-top: 20px;
| |
| padding: 15px;
| |
| border-radius: 5px;
| |
| background: #f8f9fa;
| |
| }
| |
| .success {
| |
| background: #d4edda;
| |
| color: #155724;
| |
| border: 1px solid #c3e6cb;
| |
| }
| |
| .error {
| |
| background: #f8d7da;
| |
| color: #721c24;
| |
| border: 1px solid #f5c6cb;
| |
| }
| |
| </style> | | </style> |
| </head> | | </head> |
| <body> | | <body> |
| <div class="container"> | | <h1>تست لینک‌ها در مدیاویکی</h1> |
| <h1>تست باز شدن لینک‌ها در پنجره جدید</h1>
| | |
| <p>صفحه زیر حاوی چند لینک است. روی آنها کلیک کنید تا ببینید در پنجره جدید باز می‌شوند یا نه.</p>
| | <button onclick="loadSimpleIframe()">بارگذاری iframe ساده</button> |
|
| | |
| <button onclick="loadIframe()">بارگذاری iframe تست</button>
| | <div id="iframe-container"></div> |
|
| |
| <div id="iframe-container"> </div> | |
|
| |
| <div id="result" class="result">
| |
| نتیجه تست اینجا نمایش داده می‌شود...
| |
| </div>
| |
| </div>
| |
|
| |
|
| <script> | | <script> |
| function loadIframe() { | | function loadSimpleIframe() { |
| const iframeContainer = document.getElementById('iframe-container'); | | const container = document.getElementById('iframe-container'); |
| const resultDiv = document.getElementById('result');
| |
|
| |
| // محتوای HTML ساده با چند لینک برای تست
| |
| const testContent = `
| |
| <!DOCTYPE html>
| |
| <html>
| |
| <head>
| |
| <title>صفحه تست</title>
| |
| <style>
| |
| body { font-family: Arial; padding: 20px; }
| |
| a { display: block; margin: 10px 0; padding: 10px; background: #eee; }
| |
| </style>
| |
| </head>
| |
| <body>
| |
| <h3>صفحه تست لینک‌ها</h3>
| |
| <a href="https://www.google.com">لینک ۱: گوگل</a>
| |
| <a href="https://www.wikipedia.org">لینک ۲: ویکی‌پدیا</a>
| |
| <a href="https://www.github.com">لینک ۳: گیت‌هاب</a>
| |
| <p>روی لینک‌های بالا کلیک کنید</p>
| |
| </body>
| |
| </html>
| |
| `;
| |
| | | |
| // ایجاد iframe | | // ایجاد iframe با sandbox که allow-popups دارد |
| const iframe = document.createElement('iframe'); | | const iframe = document.createElement('iframe'); |
| iframe.id = 'test-iframe'; | | iframe.src = 'https://www.pediabible.com/index.php?title=پیدایش_فصل_1&action=render'; |
| iframeContainer.innerHTML = ''; | | iframe.sandbox = 'allow-scripts allow-same-origin allow-popups'; |
| iframeContainer.appendChild(iframe); | | iframe.style.width = '100%'; |
| | | iframe.style.height = '400px'; |
| // نوشتن محتوا در iframe
| | iframe.style.border = '1px solid #ccc'; |
| const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
| |
| iframeDoc.open(); | |
| iframeDoc.write(testContent);
| |
| iframeDoc.close();
| |
| | | |
| resultDiv.innerHTML = '<div class="success">iframe بارگذاری شد. حالا روی لینک‌ها کلیک کنید.</div>'; | | container.innerHTML = ''; |
| | container.appendChild(iframe); |
| | | |
| // مدیریت لینک‌های داخل iframe | | // اضافه کردن event listener برای وقتی iframe لود شد |
| setTimeout(() => {
| | iframe.onload = function() { |
| try {
| | alert('iframe بارگذاری شد! حالا لینک‌ها باید در پنجره جدید باز شوند.'); |
| const iframeWindow = iframe.contentWindow;
| | }; |
| const iframeDoc = iframe.contentDocument;
| |
|
| |
| // روش ۱: تغییر target همه لینک‌ها به _blank
| |
| const links = iframeDoc.querySelectorAll('a');
| |
| links.forEach(link => {
| |
| link.target = '_blank';
| |
| });
| |
|
| |
| // روش ۲: اضافه کردن event listener برای اطمینان بیشتر
| |
| iframeDoc.addEventListener('click', function(e) {
| |
| if (e.target.tagName === 'A' && e.target.href) {
| |
| e.preventDefault();
| |
| window.open(e.target.href, '_blank');
| |
| }
| |
| });
| |
|
| |
| resultDiv.innerHTML += `<div class="success">${links.length} لینک مدیریت شدند. حالا تست کنید!</div>`;
| |
|
| |
| } catch (error) {
| |
| resultDiv.innerHTML = `<div class="error">خطا در مدیریت لینک‌ها: ${error.message}</div>`;
| |
| } | |
| }, 1000);
| |
| }
| |
|
| |
| // تست اضافی: ایجاد یک iframe با sandbox
| |
| function loadSandboxIframe() {
| |
| const iframeContainer = document.getElementById('iframe-container');
| |
| const resultDiv = document.getElementById('result');
| |
|
| |
| iframeContainer.innerHTML = `
| |
| <iframe
| |
| src="https://en.wikipedia.org/wiki/Main_Page"
| |
| sandbox="allow-scripts allow-same-origin allow-popups"
| |
| width="100%"
| |
| height="300">
| |
| </iframe>
| |
| `;
| |
|
| |
| resultDiv.innerHTML = '<div class="success">iframe با sandbox بارگذاری شد. لینک‌ها باید در پنجره جدید باز شوند.</div>';
| |
| } | | } |
| </script> | | </script> |
|
| |
| <div class="container">
| |
| <h2>تست دوم: iframe با محتوای واقعی</h2>
| |
| <button onclick="loadSandboxIframe()">بارگذاری ویکی‌پدیا (sandbox)</button>
| |
| <p>این iframe از یک سایت واقعی بارگذاری می‌شود.</p>
| |
| </div>
| |
| </body> | | </body> |
| </html> | | </html> |
