在导航选项卡内容框中显示跨域 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 -->          

Ajax 代码：

$.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 返回的网页正文，表示您的请求正在运行
• 在我的情况下，在测试期间，当我收到该消息时，我还收到一个 javascript 错误，提示未定义 Highcharts。
• 基本上，marketrendspremium.com 返回一个几乎为空的 HTML 正文，其中包含用于构建图表的一堆 javascript，而由于未定义 Highcharts，因此 javascript 无法正常工作。

好的，这就是我所在的位置，我无法修复一个 javascript 错误，因为我无法控制 marketrendspremium.com。所以我查看了他们的回复，他们包含了自己的 javascript 库：

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

我猜测这个库定义了 Highcharts，如果我在自己的页面上包含该库，它可能会解决问题，而且确实如此。虽然我没有使用 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 -->