2011-01-19 39 views
5

Có cách nào để lấy mã nguồn của trang mà khung nội tuyến được tải không? Tôi không muốn THAY ĐỔI bất kỳ mã nào, tôi chỉ muốn ĐỌC nó. Tôi cũng cần để có thể có được điều này bằng cách sử dụng javascript/html.Lấy mã nguồn của iframe

+4

Do trận đấu tên miền? –

+0

Tôi đang thực hiện việc này thông qua tiện ích mở rộng google. Tôi đã thêm tên miền mà tôi đang cố gắng truy cập vào tệp kê khai trong "quyền". Tôi không hoàn toàn chắc chắn nếu điều này vượt qua cùng một vấn đề tên miền, nhưng làm thế nào bạn sẽ làm điều đó giả định các lĩnh vực là như nhau? –

+0

'' – drudge

Trả lời

0
document.getElementById('iframeID').contentWindow.document.body.innerHTML 

trình trong Firefox, Chrome, Opera, IE9 beta

+0

đã thử nó, nó không hoạt động –

+0

@Daz Trình duyệt có báo cáo lỗi không? Hãy dùng thử trong Chrome, vì trình duyệt đó có báo cáo lỗi tốt. Chrome sẽ nói rằng trong lỗi –

+0

Tôi đang chạy nó thông qua chrome Nó treo trên dòng đó.Tôi đặt một cảnh báo dòng sau và cảnh báo doesnt kích hoạt.Tôi đã thấy ví dụ về điều này làm việc nhưng họ là từ năm 2008. Bạn có chắc chắn điều này vẫn hoạt động trên các trình duyệt hiện đại? –

-1

Sử dụng JQuery: http://api.jquery.com/contents/ (chỉ khi miền phù hợp)

Ví dụ:

$(iframe).contents().find('body').html(); 

Nếu nó không phù hợp, bạn có thể tải nó một lần nữa (vì nó có thể được lưu trữ đã có trong khách hàng nó có thể không đi đến máy chủ một lần nữa):

var html; 
$.get($(iframe).get(0).src, function(content) { 
    html = content; 
}); 
+1

OP có sử dụng jQuery không? –

0

Hãy thử nó như thế này:

<!DOCTYPE html> 
<html> 
<body> 

//this is iframe I ll look for its source 
<iframe id="frmin" src="http://www.w3schools.com"></iframe> 

<p>Click the button to see the source.</p> 
//this is display I will display Iframe's source here 
<div id="srcout"></div> 

//show source upon click event 
<button onclick="myFunction()">Show it</button> 

<script> 
function myFunction() { 
//get Iframe element ready for javascript manipulation 
var frm = document.getElementById("frmin"); 
//get display element ready for javascript manipulation 
var dsp = document.getElementById("srcout"); 

//find Iframe's HTML (root) element, [0] because I'm using getElementsByTagName which returns node list so I have to chose the 1st one, and put its outer content (i.e. with outer tags) to display, i.e. dsp.innerText. I use innerText because I want a text output not formatted as html. 
dsp.innerText = frm.contentDocument.getElementsByTagName('html')[0].outerHTML; 

} 
</script> 

</body> 
</html> 
+1

Vui lòng giải thích mã của bạn! – aschipfl

+0

Cách tiếp cận này sử dụng yếu tố HTML của khung nội tuyến – Lumic

+0

Cách tiếp cận này sử dụng yếu tố HTML của khung nội tuyến. Đầu tiên tôi sử dụng thao tác cụ thể iframe ** document.getElementById ("frmin"). ContentDocument ... ** để truy cập nội dung Iframe ... sau đó tôi sử dụng getElementsByTagName để tìm phần tử HTML (root) của Iframe: ** ... contentDocument. getElementsByTagName ('html') [0] ... ** // ('html') [0] nếu có nhiều phần tử HTML hơn. Cuối cùng, tôi sử dụng ** ... outerHTML ... ** để nhận mã HTML. thẻ bên ngoài. – Lumic

0

Tôi biết nó có vẻ phức tạp nhưng tôi đem lại cho bạn một viên đạn cách chứng minh 100% mà làm việc để xem mã nguồn của bạn trên trang của bạn. Tôi không biết làm thế nào để hiển thị nó trong iframes, nhưng có một cách khác để xem mã nguồn phù thủy là tốt hơn nhiều sau đó iframes và đây là cách.

Điều quan trọng là JavaScript và HTML chính xác như thế này.

CSS: Trong <head></head> phần:

<style type="text/css" > 
.button 
    { 
    background:#000cff; 
    padding:2px 10px; 
    color:white; 
    text-decoration:none; 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
    border-radius:10px; 
    cursor: pointer; 
    font-weight: bold; 
    color: white; 
    display: inline-block; 
    box-shadow: 0 0 3px gray; 
    margin: 0px; 
    font: bold 11px Arial, Sans-Serif; 
    } 

#source-code 
    { 
    display:none; 
    position:absolute; 
    top:-24px; 
    left:0; 
    width:100%; 
    height:414px; 
    background:rgba(255,255,255,0.0); 
    } 

#source-code:target { display: block; } 
#source-code pre 
    { 
    padding:20px; 
    font:14px/1.6 Monaco, Courier, MonoSpace; 
    margin:50px auto; 
    background:rgba(0,0,0,0.8); 
    color:white; 
    width:80%; 
    height:80%; 
    overflow:auto; 
    } 

#source-code pre a, 
#source-code pre a span 
    { 
    text-decoration:none; 
    color:#00ccff !important; 
    } 

#x 
    { 
    position:absolute; 
    top:30px; 
    left:10%; 
    margin-left:-41px; 
    } 

.control-copytextarea 
    { 
    position:absolute; 
    top:-3px; 
    left:20px; 
    cursor: pointer; 
    font-weight: bold; 
    padding:3px 10px; 
    border-radius: 5px 5px 0 0; 
    background: darkred; 
    color: white; 
    display: inline-block; 
    box-shadow: 0 0 3px gray; 
    margin: 0px; 
    font: bold 10px Arial, Sans-Serif; 
    } 
</style> 

JavaScript:

<script languade="JavaScript"> 
     $(function() { 
      $("<pre />", { 
       "html": '&lt;!DOCTYPE html>\n&lt;html>\n' + 
         $("html") 
          .html() 
          .replace(/[<>]/g, function(m) { return {'<':'&lt;','>':'&gt;'}[m]}) 
          .replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi,'<a href="$1">$1</a>') + 
         '\n&lt;/html>', 
       "class": "prettyprint" 
      }).appendTo("#source-code"); 

      prettyPrint(); 
     }); 
</script> 

<script languade="JavaScript"> 
     var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); 
     document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); 
</script> 

<script languade="JavaScript"> 
     var pageTracker = _gat._getTracker("UA-68528-29"); 
     pageTracker._initData(); 
     pageTracker._trackPageview(); 
</script> 

LƯU Ý: Bạn không cần phải sử dụng các mã JavaScript từ trên mạng, nhưng đối với vì lợi ích của việc nó hoạt động trên tất cả các trình duyệt, bạn nên sử dụng chúng.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script src="http://css-tricks.com/examples/ViewSourceButton/prettify/prettify.js"></script> 

HTML: Trong phần <body></body>:

<a class="button" href="#source-code" id="view-source">Show the Source Code for this page</a> 
<div id="source-code" align="left"> 
    <a href="#" id="x"><input type="button" alt="close" class="control-copytextarea" value=" Close Source Code Viewing " /></a> 
</div> 

LƯU Ý: Bạn có thể trực tiếp sao chép và dán mã vào trang web của bạn, nó sẽ làm việc chính xác như nó được.

Full VÍ DỤ:

<html> 
    <head><title>View your Source Code</title> 

<style type="text/css" > 
.button 
    { 
    background:#000cff; 
    padding:2px 10px; 
    color:white; 
    text-decoration:none; 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
    border-radius:10px; 
    cursor: pointer; 
    font-weight: bold; 
    color: white; 
    display: inline-block; 
    box-shadow: 0 0 3px gray; 
    margin: 0px; 
    font: bold 11px Arial, Sans-Serif; 
    } 

#source-code 
    { 
    display:none; 
    position:absolute; 
    top:-24px; 
    left:0; 
    width:100%; 
    height:414px; 
    background:rgba(255,255,255,0.0); 
    } 

#source-code:target { display: block; } 
#source-code pre 
    { 
    padding:20px; 
    font:14px/1.6 Monaco, Courier, MonoSpace; 
    margin:50px auto; 
    background:rgba(0,0,0,0.8); 
    color:white; 
    width:80%; 
    height:80%; 
    overflow:auto; 
    } 

#source-code pre a, 
#source-code pre a span 
    { 
    text-decoration:none; 
    color:#00ccff !important; 
    } 

#x 
    { 
    position:absolute; 
    top:30px; 
    left:10%; 
    margin-left:-41px; 
    } 

.control-copytextarea 
    { 
    position:absolute; 
    top:-3px; 
    left:20px; 
    cursor: pointer; 
    font-weight: bold; 
    padding:3px 10px; 
    border-radius: 5px 5px 0 0; 
    background: darkred; 
    color: white; 
    display: inline-block; 
    box-shadow: 0 0 3px gray; 
    margin: 0px; 
    font: bold 10px Arial, Sans-Serif; 
    } 
</style> 

<script languade="JavaScript"> 
     $(function() { 
      $("<pre />", { 
       "html": '&lt;!DOCTYPE html>\n&lt;html>\n' + 
         $("html") 
          .html() 
          .replace(/[<>]/g, function(m) { return {'<':'&lt;','>':'&gt;'}[m]}) 
          .replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi,'<a href="$1">$1</a>') + 
         '\n&lt;/html>', 
       "class": "prettyprint" 
      }).appendTo("#source-code"); 

      prettyPrint(); 
     }); 
</script> 

<script languade="JavaScript"> 
     var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); 
     document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); 
</script> 

<script languade="JavaScript"> 
     var pageTracker = _gat._getTracker("UA-68528-29"); 
     pageTracker._initData(); 
     pageTracker._trackPageview(); 
</script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script src="http://css-tricks.com/examples/ViewSourceButton/prettify/prettify.js"></script> 

    </head> 
<body> 



<a class="button" href="#source-code" id="view-source">Show the Source Code for this page</a> 
<div id="source-code" align="left"> 
    <a href="#" id="x"><input type="button" alt="close" class="control-copytextarea" value=" Close Source Code Viewing " /></a> 
</div> 


    </body> 
</html> 
Các vấn đề liên quan