Question

悬崖笔记：

bookmarklet不会在iFrame中加载外部.php页面。
需要书签来从页面获取所有图像和一些特定数据。
在iFrame中显示此数据。
需要帮助:)

我正在尝试创建一个bookmarklet，一旦点击将弹出iframe并显示当前页面中的特定数据。功能类似于wanelo.com使用的书签。

例如，使用像asos.com这样的网站。我希望书签能够获取当前页面上的所有图像，项目名称，项目价格。然后它将显示在可以使用php操作的iFrame（托管在我的服务器上）中。

我遇到的问题是实际的iframe。我的bookmarklet将联系外部托管的.js文件并弹出窗口，但它不会在创建的iFrame中从我的服务器加载.php文件。任何帮助或建议都会很棒。

以下是我的.js文件的代码。

    (function(){

var v = "1.3.2";

if (window.jQuery === undefined || window.jQuery.fn.jquery < v) {
    var done = false;
    var script = document.createElement("script");
    script.src = "http://ajax.googleapis.com/ajax/libs/jquery/" + v + "/jquery.min.js";
    script.onload = script.onreadystatechange = function(){
        if (!done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) {
            done = true;
            initMyBookmarklet();
        }
    };
    document.getElementsByTagName("head")[0].appendChild(script);
} else {
    initMyBookmarklet();
}

function initMyBookmarklet() {
    (window.myBookmarklet = function() {   

   //Get Url and Process        
        var scrapeUrl = window.location;            
   if(scrapeUrl.href.indexOf(".google.com") > -1) {
             scrapeUrl = "google";
                        }       
   else if(scrapeUrl.href.indexOf(".bbc.co.uk") > -1) {
             scrapeUrl = "bbc";
                        }
   else if(scrapeUrl.href.indexOf(".asos.com") > -1) {
             scrapeUrl = "asos";
                        }
   else {
             scrapeUrl = "Not Found";       
             }   



   //POPUP WINDOW CODE
   if (scrapeUrl === "asos") {

   //Create Url of my hosted .php
   //    popUpUrl = "http://www.google.com/";
     popUpUrl = "http://www.example.com/";
     popUpUrl = popUpUrl+'popup.php?page=GOOD';

 var contentwidth = "100";
     var contentheight = "100";

    var iframeUrl = popUpUrl + '&width=' + contentwidth + '&height=' + contentheight;
    $('#2343234Iframe').attr('src', iframeUrl).attr('width', contentwidth).attr('height', contentheight);
            //Just to show iframe Url
             alert(iframeUrl);      

   //APPEND THE IFRAME TO BODY
          $("body").append("\
    <div id='shopframe'>\
    <div id='shopframe_veil' style=''>\
        <p>Loading...</p>\
            </div>\
<iframe id='2343234Iframe' src=''  onload=\"$('#shopframe iframe').slideDown(500);\">Enable iFrames.</iframe>\
<style type='text/css'>\
#shopframe_veil { display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(255,255,255,.25); cursor: pointer; z-index: 900; }\
#shopframe_veil p { color: black; font: normal normal bold 20px/20px Helvetica, sans-serif; position: absolute; top: 50%; left: 50%; width: 10em; margin: -10px auto 0 -5em; text-align: center; }\
#shopframe iframe { display: none; position: fixed; top: 10%; left: 10%; width: 80%; height: 80%; z-index: 999; border: 10px solid rgba(0,0,0,.5); margin: -5px 0 0 -5px; }\
</style>\
</div>\
");
                $("#shopframe_veil").fadeIn(750);   
        } else {
            $("#shopframe_veil").fadeOut(750);
            $("#shopframe iframe").slideUp(500);
            setTimeout("$('#shopframe').remove()", 750);
        }
        $("#shopframe_veil").click(function(event){
            $("#shopframe_veil").fadeOut(750);
            $("#shopframe iframe").slideUp(500);
            setTimeout("$('#shopframe').remove()", 750);
        });
    })();
}

我也在考虑将信息从源网站传递到我的.php文件的最佳方法。我在考虑在iframe网址中传递数据。 IE /？var1 = DATA1＆amp; var2 = DATA2＆amp; var3 = DATA3 唯一让我担心的是，如果网址的长度太长，可能会遇到问题。

再一次任何帮助都会很棒，提前谢谢。

UPDATE 1 ：修复了attr（）没有更改iframe src的问题。这是任何可能偶然发现这篇文章的人的更新代码。为简单起见，我删除了一些额外的代码。我发现在调用iframe之后移动attr（）修复了问题，现在它可以正常工作。

        if (scrapeUrl === 1) {
            $("body").append("\
                    <div id='shopframe'>\
            <div id='shopframe_veil' style=''>\
                       <p>Loading...</p>\
                    </div>\
<iframe name='myIframe' id='myIframe' src=''  onload=\"$('#shopframe iframe').slideDown(500);\">Enable iFrames.</iframe>\
                            <style type='text/css'>\
                        #shopframe_veil { display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(255,255,255,.25); cursor: pointer; z-index: 900; }\
                        #shopframe_veil p { color: black; font: normal normal bold 20px/20px Helvetica, sans-serif; position: absolute; top: 50%; left: 50%; width: 10em; margin: -10px auto 0 -5em; text-align: center; }\
                        #shopframe iframe { display: none; position: fixed; top: 10%; left: 10%; width: 80%; height: 80%; z-index: 999; border: 10px solid rgba(0,0,0,.5); margin: -5px 0 0 -5px; }\
                    </style>\
                </div>");
                  $("#shopframe_veil").fadeIn(750);  
                  $('#myIframe').attr('src', popUpUrl);

Bookmarklet Jquery Iframe

0 个答案: