탐색 탭 컨텐트 상자에 교차 도메인 HTML 컨텐트 표시

Question

탐색 탭 컨텐트 상자에 도메인 간 웹 페이지를 표시해야합니다. 나는 "어떤 기원"예를 사용하고는이 링크

Loading cross domain endpoint with jQuery AJAX

설명 내 HTML 코드는 다음과 같습니다

<section class="local-market-stats"> 
    <div id="market-condition-chart-wrap"> 
     <ul class="nav nav-tabs" id="myTabs"> 
      <li class="active"><a data-toggle="tab" href="#cc">CC</a></li> 
      <li><a data-toggle="tab" href="#fm">FM</a></li> 
      <li><a data-toggle="tab" href="#et">ET</a></li> 
      <li><a data-toggle="tab" href="#bs">BS</a></li> 
     </ul> 
      <div class="tab-content"> 
      <div class="tab-pane active" id="cc"> 
       <div></div> <!-- the external page content displays here --> 
      </div> 

      <div class="tab-pane" id="fm"> 
      </div> 

      <div class="tab-pane" id="et"> 
      </div> 

      <div class="tab-pane" id="bs"> 
      </div> 
      </div><!-- end tab-content --> 
    </div><!-- end market-condition-chart-wrap --> 
    </section><!-- end local-market-stats -->   

아약스 코드 :

$.ajaxSetup({ 
     datatype : "html", 
     contentType: "application/x-www-form-urlencoded; charset=UTF-8" 
}); 

$.getJSON('http://whateverorigin.org/get?url=' + encodeURIComponent('http://www.marketrendspremium.com/share/v1/e/cmlkPTEmZnRpZD0yJmZpZD0xMDAwJmd0eT0xMiZsdGlkPTQmbGlkPTk5OTk5JmdpZD0wJmNjPTAwMDBkZCZzaWQ9MCZtaWQ9MCZ0dD0yJm1vZGU9MiZ3aWR0aD01NDAmaGVpZ2h0PTMzMCZtbHNpZD0wJmN0eT1tbHM=') 
     + '&callback=?', 

     function(data) { 
      $('#cc div').html(data.contents); 
}); 

아무 것도 표시되지되었다 결과적으로 encodeURIComponent ('http://google.com')로 다시 전환하면 정상적으로 작동합니다. 링크를 표시 할 때 url을 인코딩 할 필요는 없지만 encodeURIComponent()를 제거하더라도 여전히 작동하지 않습니다.

모든 조언을 크게 듣습니다!

Answer 1

나는 제대로 작동 할 수있게되었지만 실제로 찾고있는 것인지 확실하지 않습니다. 노트의 첫 번째 몇 :

은 "차트 간다"라는 메시지가 도착

• - 귀하의 요청 테스트 중에 내 경우에는
• 을 일하는 의미 marketrendspremium.com에 의해 반환 된 웹 페이지의 몸이었다, 그 메시지를 받았을 때 Highcharts가 정의되어 있지 않다는 자바 스크립트 오류가 발생했습니다.
• 기본적으로 marketrendspremium.com은 차트를 작성하는 자바 스크립트가있는 거의 빈 HTML 본문을 반환했으며 Highcharts가 정의되지 않았기 때문에 javascript가 작동하지 않았습니다.

그렇기 때문에 나는 marketrendspremium.com을 제어 할 수 없어서 자바 스크립트 오류로 고칠 수 없었습니다. 그래서 나는 그들의 반응을 검토, 그들은 자바 스크립트 라이브러리 자신을 포함하고 있습니다 :이 라이브러리는 Highcharts을 정의하는 추측을했다, 나는 내 자신의 페이지에 해당 라이브러리를 포함 할 경우,이 문제를 해결할 수 있음을

<script type="text/javascript" src="http://209.20.80.108/chart/js/highcharts.js"></script> 

을 , 그리고 그것을했다. JSON을 사용하지 않았지만 corsproxy.com을 사용했습니다. 여기에 소스 코드가 있습니다 :

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script type="text/javascript" src="http://209.20.80.108/chart/js/highcharts.js"></script> 
<script type="text/javascript"> 
    // this variable isn't necessary but it made the code easier to read 
    var url = 'www.marketrendspremium.com/share/v1/e/cmlkPTEmZnRpZD0yJmZpZD0xMDAwJmd0eT0xMiZsdGlkPTQmbGlkPTk5OTk5JmdpZD0wJmNjPTAwMDBkZCZzaWQ9MCZtaWQ9MCZ0dD0yJm1vZGU9MiZ3aWR0aD01NDAmaGVpZ2h0PTMzMCZtbHNpZD0wJmN0eT1tbHM='; 
    $.get('http://www.corsproxy.com/' + url, 
     function(data) { 
      $('#cc div').html(data); 
     } 
    ); 
</script> 
<section class="local-market-stats"> 
    <div id="market-condition-chart-wrap"> 
     <ul class="nav nav-tabs" id="myTabs"> 
      <li class="active"><a data-toggle="tab" href="#cc">CC</a></li> 
      <li><a data-toggle="tab" href="#fm">FM</a></li> 
      <li><a data-toggle="tab" href="#et">ET</a></li> 
      <li><a data-toggle="tab" href="#bs">BS</a></li> 
     </ul> 
     <div class="tab-content"> 
      <div class="tab-pane active" id="cc"> 
       <div></div> <!-- the external page content displays here --> 
      </div> 
      <div class="tab-pane" id="fm"></div> 
      <div class="tab-pane" id="et"></div> 
      <div class="tab-pane" id="bs"></div> 
     </div><!-- end tab-content --> 
    </div><!-- end market-condition-chart-wrap --> 
</section><!-- end local-market-stats -->