Iframe සඳහා CSS අයදුම් කරන්නේ කෙසේද?

මට සරල පිටුවක් ඇත, එය අයිෆ්‍රේම් කොටස් කිහිපයක් ඇත (ආර්එස්එස් සබැඳි පෙන්වීමට). එකම CSS ආකෘතිය ප්‍රධාන පිටුවේ සිට iframe හි පෙන්වන පිටුවට යෙදිය හැක්කේ කෙසේද?

සංස්කරණය කරන්න: සුදුසු CORS ශීර්ෂකය සකසා ඇත්නම් මිස මෙය හරස් වසම ක්‍රියා නොකරයි .

මෙහි වෙනස් කරුණු දෙකක් තිබේ: අයිෆ්‍රේම් බ්ලොක් වල ශෛලිය සහ අයිෆ්‍රේම් තුළ අන්තර්ගත කර ඇති පිටුවේ විලාසය. ඔබට සුපුරුදු පරිදි iframe අවහිර කිරීමේ විලාසය සැකසිය හැකිය:

<iframe name="iframe1" id="iframe1" src="empty.htm" 
        frameborder="0" border="0" cellspacing="0"
        style="border-style: none;width: 100%; height: 120px;"></iframe>

අයිෆ්‍රේම් තුළ අන්තර්ගත කර ඇති පිටුවේ ශෛලිය ළමා පිටුවට ඇතුළත් කිරීමෙන් සැකසිය යුතුය:

<link type="text/css" rel="Stylesheet" href="Style/simple.css" />

නැතහොත් එය ජාවාස්ක්‍රිප්ට් සමඟ මව් පිටුවෙන් පූරණය කළ හැකිය:

var cssLink = document.createElement("link");
cssLink.href = "style.css"; 
cssLink.rel = "stylesheet"; 
cssLink.type = "text/css"; 
frames['iframe1'].document.head.appendChild(cssLink);

මට මෙම ගැටළුව ගූගල් දින දර්ශනය සමඟ හමු විය . මට අවශ්‍ය වූයේ එය අඳුරු පසුබිමක හැඩගස්වා අකුරු වෙනස් කිරීමයි.

වාසනාවකට මෙන්, කාවැද්දූ කේතයේ URL ය වෙත access ජු ප්‍රවේශයට කිසිදු සීමාවක් නොතිබුණි, එබැවින් PHP ශ්‍රිතය භාවිතා කිරීමෙන් file_get_contentsපිටුවෙන් සම්පූර්ණ අන්තර්ගතය ලබා ගත හැකිය. ගූගල් යූආර්එල් ඇමතීම වෙනුවට, ඔබේ සේවාදායකයේ පිහිටා ඇති පීඑච්පී ගොනුවක් ඇමතිය හැකිය, උදා. google.php, එහි මුල් අන්තර්ගතය වෙනස් කිරීම් සහිතව අඩංගු වේ:

$content = file_get_contents('https://www.google.com/calendar/embed?src=%23contacts%40group.v.calendar.google.com&ctz=America/Montreal');

ඔබගේ මෝස්තර පත්‍රයට මාර්ගය එක් කිරීම:

$content = str_replace('</head>','<link rel="stylesheet" href="http://www.yourwebsiteurl.com/google.css" /></head>', $content);

(මෙය ඔබගේ ස්ටයිල්ෂීට් එක අවසන් ටැගයට පෙර headඅවසන් වේ.)

Css සහ js සාපේක්ෂව හැඳින්වුවහොත් මූලික url එකෙහි මූලික url එක සඳහන් කරන්න:

$content = str_replace('</title>','</title><base href="https://www.google.com/calendar/" />', $content);

අවසාන google.phpගොනුව මේ ආකාරයට විය යුතුය:

<?php
$content = file_get_contents('https://www.google.com/calendar/embed?src=%23contacts%40group.v.calendar.google.com&ctz=America/Montreal');
$content = str_replace('</title>','</title><base href="https://www.google.com/calendar/" />', $content);
$content = str_replace('</head>','<link rel="stylesheet" href="http://www.yourwebsiteurl.com/google.css" /></head>', $content);
echo $content;

ඉන්පසු ඔබ iframeකාවැද්දූ කේතය පහත පරිදි වෙනස් කරයි :

<iframe src="http://www.yourwebsiteurl.com/google.php" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

වාසනාව!

අයිෆ්‍රේම් හි අන්තර්ගතය සම්පූර්ණයෙන්ම ඔබගේ පාලනය යටතේ නොමැති නම් හෝ විවිධ මෝස්තර වලින් විවිධ පිටු වලින් අන්තර්ගතයට ප්‍රවේශ වීමට ඔබට අවශ්‍ය නම් ඔබට එය ජාවාස්ක්‍රිප්ට් භාවිතයෙන් හැසිරවීමට උත්සාහ කළ හැකිය.

var frm = frames['frame'].document;
var otherhead = frm.getElementsByTagName("head")[0];
var link = frm.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", "style.css");
otherhead.appendChild(link);

ඔබ භාවිතා කරන බ්‍රව්සරය මත පදනම්ව මෙය ක්‍රියාත්මක වන්නේ එකම වසමෙන් සේවය කරන පිටුවල පමණක් බව සලකන්න.

var $head = $("#eFormIFrame").contents().find("head");

$head.append($("<link/>", {
    rel: "stylesheet",
    href: url,
    type: "text/css"
}));

<link>අමතර මෝස්තර පත්‍රයක් පැටවීම සඳහා භාවිතා නොකර CSS කේතය කෙලින්ම යෙදිය යුතු ආකාරය මෙන්න .

var head = jQuery("#iframe").contents().find("head");
var css = '<style type="text/css">' +
          '#banner{display:none}; ' +
          '</style>';
jQuery(head).append(css);

මෙය iframe පිටුවේ බැනරය සඟවයි. ඔබගේ යෝජනා වලට ස්තූතියි!

බොහෝ බ්‍රව්සර් විසින් iframe වෙනත් HTML පිටුවක් මෙන් විශ්වීයව හසුරුවනු ලැබේ. අයිෆ්‍රේම් හි අන්තර්ගතයට එකම මෝස්තර පත්‍රය යෙදීමට ඔබට අවශ්‍ය නම්, එහි භාවිතා කර ඇති පිටු වලින් එය යොමු කරන්න.

හැන්ගි පැවසූ පරිදි ඔබ iframe හි පිටුව පාලනය කරන්නේ නම්, පහසුම ප්‍රවේශය වන්නේ පොදු මෝස්තර සහිත හවුල් CSS ගොනුවක් නිර්මාණය කිරීමයි, ඉන්පසු ඔබේ html පිටු වලින් එය සම්බන්ධ කරන්න.

එසේ නොමැතිනම් ඔබේ අයිෆ්‍රේම් හි බාහිර පිටුවකින් පිටුවක ශෛලිය ගතිකව වෙනස් කිරීමට ඔබට නොහැකි වනු ඇත. මෙයට හේතුව, කොල්ලකෑම සහ වෙනත් හක්ක සඳහා අනිසි ලෙස භාවිතා කිරීම හේතුවෙන් බ්‍රව්සර් හරස් රාමු ඩොම් ස්ක්‍රිප්ටින් වල ආරක්ෂාව දැඩි කර තිබීමයි.

මෙම නිබන්ධනය මඟින් පොදුවේ ස්ක්‍රිප්ටින් අයිෆ්‍රේම් පිළිබඳ වැඩි විස්තර ලබා දෙනු ඇත. හරස් රාමු ස්ක්‍රිප්ටින් ගැන IE දෘෂ්ටි කෝණයෙන් ආරක්ෂක සීමාවන් පැහැදිලි කරයි.

ඉහත සුළු වෙනසක් සහිතව ක්‍රියා කරයි:

var cssLink = document.createElement("link") 
cssLink.href = "pFstylesEditor.css"; 
cssLink.rel = "stylesheet"; 
cssLink.type = "text/css"; 

//Instead of this
//frames['frame1'].document.body.appendChild(cssLink);
//Do this

var doc=document.getElementById("edit").contentWindow.document;

//If you are doing any dynamic writing do that first
doc.open();
doc.write(myData);
doc.close();

//Then append child
doc.body.appendChild(cssLink);

අවම වශයෙන් ff3 සහ ie8 සමඟ හොඳින් ක්‍රියා කරයි

පහත සඳහන් දෑ මා වෙනුවෙන් වැඩ කළේය.

var iframe = top.frames[name].document;
var css = '' +
          '<style type="text/css">' +
          'body{margin:0;padding:0;background:transparent}' +
          '</style>';
iframe.open();
iframe.write(css);
iframe.close();

ඔබට ප්‍රධාන පිටුවෙන් CSS සහ JavaScript නැවත භාවිතා කිරීමට අවශ්‍ය නම් සමහර විට ඔබ <IFRAME>අජැක්ස් පටවා ඇති අන්තර්ගතයක් ආදේශ කිරීම ගැන සලකා බැලිය යුතුය . සෙවුම් බොට් වලට ජාවාස්ක්‍රිප්ට් ක්‍රියාත්මක කිරීමට හැකි වූ විට මෙය දැන් වඩා SEO හිතකාමී ය.

මෙය ඔබේ ලේඛනයට තවත් html පිටුවක් ඇතුළත් වන jQuery උදාහරණයකි. මෙය වඩා SEO හිතකාමී ය iframe. බොට්ස් ඇතුළත් කළ පිටුව සුචිගත නොකරන බවට වග බලා ගැනීම සඳහා එය ඇතුලත් කිරීමට ඉඩ දෙන්නrobots.txt

<html>
  <header>
    <script src="/js/jquery.js" type="text/javascript"></script>
  </header>
  <body>
    <div id='include-from-outside'></div>
    <script type='text/javascript'>
      $('#include-from-outside').load('http://example.com/included.html');
    </script> 
  </body>
</html>

ඔබට ගූගල් වෙතින් කෙලින්ම jQuery ඇතුළත් කළ හැකිය: http://code.google.com/apis/ajaxlibs/documentation/ - මෙයින් අදහස් කරන්නේ නව අනුවාදයන් ස්වයංක්‍රීයව ඇතුළත් කිරීම සහ සැලකිය යුතු වේග වැඩි වීමකි. එසේම, එයින් අදහස් වන්නේ ඔබට jQuery ලබා දීම සඳහා ඔබ ඔවුන්ව විශ්වාස කළ යුතු බවයි;)

රාමු අන්තර්ගතය පැටවීමේදී සිදුවන ප්‍රමාදයන් සමඟ සාර්ථකව කටයුතු කිරීම සඳහා ඉහත jQuery විසඳුම පුළුල් කිරීම.

$('iframe').each(function(){
    function injectCSS(){
        $iframe.contents().find('head').append(
            $('<link/>', { rel: 'stylesheet', href: 'iframe.css', type: 'text/css' })
        );
    }

    var $iframe = $(this);
    $iframe.on('load', injectCSS);
    injectCSS();
});

මගේ සංයුක්ත අනුවාදය :

<script type="text/javascript">
$(window).load(function () {
    var frame = $('iframe').get(0);
    if (frame != null) {
        var frmHead = $(frame).contents().find('head');
        if (frmHead != null) {
            frmHead.append($('style, link[rel=stylesheet]').clone()); // clone existing css link
            //frmHead.append($("<link/>", { rel: "stylesheet", href: "/styles/style.css", type: "text/css" })); // or create css link yourself
        }
    }   
});
</script>

කෙසේ වෙතත්, සමහර විට iframeකවුළු පටවා ඇති විට එය සූදානම් නැත, එබැවින් ටයිමරයක් භාවිතා කිරීමේ අවශ්‍යතාවයක් පවතී .

භාවිතයට සුදානම් කේතය (ටයිමරය සමඟ):

<script type="text/javascript">
var frameListener;
$(window).load(function () {
    frameListener = setInterval("frameLoaded()", 50);
});
function frameLoaded() {
    var frame = $('iframe').get(0);
    if (frame != null) {
        var frmHead = $(frame).contents().find('head');
        if (frmHead != null) {
            clearInterval(frameListener); // stop the listener
            frmHead.append($('style, link[rel=stylesheet]').clone()); // clone existing css link
            //frmHead.append($("<link/>", { rel: "stylesheet", href: "/styles/style.css", type: "text/css" })); // or create css link yourself
        }
    }
}
</script>

... සහ jQuery සබැඳිය:

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script>

මෙහි ඇති වෙනත් පිළිතුරු jQuery සහ CSS සබැඳි භාවිතා කරන බව පෙනේ.

මෙම කේතය වැනිලා ජාවාස්ක්‍රිප්ට් භාවිතා කරයි. එය නව <style>අංගයක් නිර්මාණය කරයි . එමඟින් එම මූලද්‍රව්‍යයේ පෙළ අන්තර්ගතය නව CSS අඩංගු නූලක් ලෙස සකසයි. තවද එය එම මූලද්‍රව්‍යය කෙලින්ම iframe ලේඛනයේ හිසට එකතු කරයි.

var iframe = document.getElementById('the-iframe');
var style = document.createElement('style');
style.textContent =
  '.some-class-name {' +
  '  some-style-name: some-value;' +
  '}' 
;
iframe.contentDocument.head.appendChild(style);

භාවිතයට මෙය උත්සාහ කළ හැකිය:

$('iframe').load( function() {
     $('iframe').contents().find("head")
     .append($("<style type='text/css'>  .my-class{display:none;}  </style>"));
  });

ඔබ "doc.open ()" යැයි පැවසූ විට එයින් අදහස් කරන්නේ ඔබට iframe තුළ ඕනෑම HTML ටැගයක් ලිවිය හැකි බවයි, එබැවින් ඔබ HTML පිටුව සඳහා සියලු මූලික ටැග් ලිවිය යුතු අතර ඔබේ iframe හිසෙහි CSS සම්බන්ධතාවයක් ලබා ගැනීමට අවශ්‍ය නම් පමණක් ලියන්න iframe එහි CSS සබැඳිය සමඟ. මම ඔබට උදාහරණයක් දෙන්නම්:

doc.open();

doc.write('<!DOCTYPE html><html><head><meta charset="utf-8"/><meta http-quiv="Content-Type" content="text/html; charset=utf-8"/><title>Print Frame</title><link rel="stylesheet" type="text/css" href="https://stackoverflow.com/css/print.css"/></head><body><table id="' + gridId + 'Printable' + '" class="print" >' + out + '</table></body></html>');

doc.close();

ඔබට iframe හි අන්තර්ගතය මේ ආකාරයෙන් හැඩගස්වා ගැනීමට නොහැකි වනු ඇත. මගේ යෝජනාව වනුයේ සර්වර්සයිඩ් ස්ක්‍රිප්ටින් (පීඑච්පී, ඒඑස්පී, හෝ පර්ල් ස්ක්‍රිප්ට්) භාවිතා කිරීම හෝ ජාවාස්ක්‍රිප්ට් කේතයට සංග්‍රහයක් පරිවර්තනය කරන සබැඳි සේවාවක් සොයා ගැනීමයි. එය කළ හැකි අනෙක් ක්‍රමය වනුයේ ඔබට සේවාදායකයක් කළ හැකි නම් ඇතුළත් වේ.

එකම වසම් සඳහා බොහෝ පිළිතුරු ලියා ඇති බැවින්, හරස් වසම්වල මෙය කරන්නේ කෙසේදැයි මම ලියමි.

පළමුව, ඔබ තැපැල් පණිවිඩ API දැනගත යුතුය . කවුළු දෙකක් අතර සන්නිවේදනය කිරීමට අපට පණිවිඩකරුවෙකු අවශ්‍යය.

මෙන්න මම නිර්මාණය කළ පණිවිඩකරුවෙක්.

/**
 * Creates a messenger between two windows
 *  which have two different domains
 */
class CrossMessenger {

    /**
     * 
     * @param {object} otherWindow - window object of the other
     * @param {string} targetDomain - domain of the other window
     * @param {object} eventHandlers - all the event names and handlers
     */
    constructor(otherWindow, targetDomain, eventHandlers = {}) {
        this.otherWindow = otherWindow;
        this.targetDomain = targetDomain;
        this.eventHandlers = eventHandlers;

        window.addEventListener("message", (e) => this.receive.call(this, e));
    }

    post(event, data) {

        try {
            // data obj should have event name
            var json = JSON.stringify({
                event,
                data
            });
            this.otherWindow.postMessage(json, this.targetDomain);

        } catch (e) {}
    }

    receive(e) {
        var json;
        try {
            json = JSON.parse(e.data ? e.data : "{}");
        } catch (e) {
            return;
        }
        var eventName = json.event,
            data = json.data;

        if (e.origin !== this.targetDomain)
            return;

        if (typeof this.eventHandlers[eventName] === "function") 
            this.eventHandlers[eventName](data);
    }

}

සන්නිවේදනය සඳහා කවුළු දෙකකින් මෙය භාවිතා කිරීමෙන් ඔබේ ගැටළුව විසඳා ගත හැකිය.

ප්රධාන කවුළුවල,

var msger = new CrossMessenger(iframe.contentWindow, "https://iframe.s.domain");

var cssContent = Array.prototype.map.call(yourCSSElement.sheet.cssRules, css_text).join('\n');
msger.post("cssContent", {
   css: cssContent
})

ඉන්පසු, සිදුවීම අයිෆ්‍රේම් වෙතින් ලබා ගන්න.

Iframe හි:

var msger = new CrossMessenger(window.parent, "https://parent.window.domain", {
    cssContent: (data) => {
        var cssElem = document.createElement("style");
        cssElem.innerHTML = data.css;
        document.head.appendChild(cssElem);
    }
})

වැඩි විස්තර සඳහා සම්පූර්ණ ජාවාස්ක්‍රිප්ට් සහ අයිෆ්‍රේම්ස් නිබන්ධනය බලන්න.

ඔබට iframe පිටුවට ප්‍රවේශය තිබේ නම් සහ වෙනත් CSS එකක් ඒ සඳහා අයදුම් කිරීමට අවශ්‍ය නම් ඔබ එය ඔබගේ පිටුවේ iframe හරහා පටවන විට පමණක් මෙහි දී මම මෙවැනි දේ සඳහා විසඳුමක් සොයා ගතිමි

iframe වෙනත් වසමක් පූරණය කළත් මෙය ක්‍රියාත්මක වේ

ගැන පරීක්ෂා කරන්න postMessage()

සැලැස්ම නම්, css වැනි පණිවිඩයක් iframe වෙත යවන්න

iframenode.postMessage('h2{color:red;}','*');

* iframe හි කුමන වසම කුමක් වුවත් මෙම පණිවිඩය යැවීමයි

පණිවිඩය iframe වලින් ලබාගෙන ලැබුණු පණිවිඩය (CSS) එම ලේඛන ශීර්ෂයට එක් කරන්න.

iframe පිටුවට එක් කිරීමට කේතය

window.addEventListener('message',function(e){

    if(e.data == 'send_user_details')
    document.head.appendChild('<style>'+e.data+'</style>');

});

මේ ආකාරයට ශෛලිය ප්‍රධාන HTML තුළ තැබීමට මම තවත් විසඳුමක් සොයා ගතිමි

<style id="iframestyle">
    html {
        color: white;
        background: black;
    }
</style>
<style>
    html {
        color: initial;
        background: initial;
    }
    iframe {
        border: none;
    }
</style>

ඉන්පසු iframe හි මෙය කරන්න (js onload බලන්න)

<iframe  onload="iframe.document.head.appendChild(ifstyle)" name="log" src="/upgrading.log"></iframe>

සහ ජේ

<script>
    ifstyle = document.getElementById('iframestyle')
    iframe = top.frames["log"];
</script>

එය හොඳම විසඳුම නොවිය හැකි අතර එය නිසැකවම වැඩිදියුණු කළ හැකි නමුත් මව් කවුළුව තුළ "ස්ටයිල්" ටැගයක් තබා ගැනීමට ඔබට අවශ්‍ය නම් එය තවත් විකල්පයකි

මෙන්න, වසම තුළ කරුණු දෙකක් තිබේ

1. iFrame අංශය
2. පිටුව iFrame තුළ පටවා ඇත

එබැවින් ඔබට එම කොටස් දෙක පහත පරිදි සැකසීමට අවශ්‍යය,

1. iFrame කොටස සඳහා ශෛලිය

එම ගෞරවනීය idහෝ classනම සහිත CSS භාවිතා කර එය ශෛලිය කළ හැකිය . ඔබට එය ඔබේ මව් ස්ටයිල් ෂීට් වලද මෝස්තර කළ හැකිය.

<style>
#my_iFrame{
height: 300px;
width: 100%;
position:absolute;
top:0;
left:0;
border: 1px black solid;
}
</style>

<iframe name='iframe1' id="my_iFrame" src="#" cellspacing="0"></iframe>

2. අයිෆ්‍රේම් තුළ පටවා ඇති පිටුව මෝස්තර කරන්න

මෙම ශෛලීන් ජාවාස්ක්‍රිප්ට් ආධාරයෙන් මව් පිටුවෙන් පූරණය කළ හැකිය

var cssFile  = document.createElement("link") 
cssFile.rel  = "stylesheet"; 
cssFile.type = "text/css"; 
cssFile.href = "iFramePage.css"; 

ඉන්පසු එම CSS ගොනුව ගෞරවනීය iFrame කොටසට සකසන්න

//to Load in the Body Part
frames['my_iFrame'].document.body.appendChild(cssFile); 
//to Load in the Head Part
frames['my_iFrame'].document.head.appendChild(cssFile);

මෙන්න, ඔබට මේ ආකාරයෙන් iFrame තුළ පිටුවේ ප්‍රධාන කොටස සංස්කරණය කළ හැකිය

var $iFrameHead = $("#my_iFrame").contents().find("head");
$iFrameHead.append(
   $("<link/>",{ 
      rel: "stylesheet", 
      href: urlPath, 
      type: "text/css" }
     ));

මම හිතන්නේ පහසුම ක්‍රමය නම් අයිෆ්‍රේම් හා සමාන ස්ථානයක තවත් ඩිව් එකක් එකතු කිරීමයි

එය z-indexඅයිෆ්‍රේම් කන්ටේනරයට වඩා විශාල කරන්න, එවිට ඔබට පහසුවෙන් ඔබේම විලාසිතාව සැකසිය හැකිය. ඔබට එය මත ක්ලික් කිරීමට අවශ්‍ය නම්, pointer-events:noneඔබේම කොටස භාවිතා කරන්න, එවිට ඔබට එය මත ක්ලික් කිරීමට අවශ්‍ය නම් iframe ක්‍රියා කරයි;)

එය යමෙකුට උපකාරී වනු ඇතැයි මම බලාපොරොත්තු වෙමි;)

අපට විලාසිතාවේ ටැගය iframe තුළට ඇතුළු කළ හැකිය. මෙහි ද පළ කර ඇත ...

<style type="text/css" id="cssID">
.className
{
    background-color: red;
}
</style>

<iframe id="iFrameID"></iframe>

<script type="text/javascript">
    $(function () {
        $("#iFrameID").contents().find("head")[0].appendChild(cssID);
        //Or $("#iFrameID").contents().find("head")[0].appendChild($('#cssID')[0]);
    });
</script>

නෝඩ් එකක් අයිෆ්‍රේම් අනුවාදයක් මගින් ප්‍රතිස්ථාපනය කරන අපූරු පිටපතක් තිබේ. CodePen Demo

භාවිත උදාහරණ:

// Single node
var component = document.querySelector('.component');
var iframe = iframify(component);

// Collection of nodes
var components = document.querySelectorAll('.component');
var iframes = Array.prototype.map.call(components, function (component) {
  return iframify(component, {});
});

// With options
var component = document.querySelector('.component');
var iframe = iframify(component, {
  headExtra: '<style>.component { color: red; }</style>',
  metaViewport: '<meta name="viewport" content="width=device-width">'
});

විකල්පයක් ලෙස, ඔබට පහත දැක්වෙන පරිදි CSS-in-JS තාක්ෂණය භාවිතා කළ හැකිය:

https://github.com/cssobj/cssobj

එය ජේඑස් වස්තුව CSS ලෙස iframe වෙත ගතිකව එන්නත් කළ හැකිය

මෙය සංකල්පයක් පමණි, නමුත් ආරක්ෂක පරීක්ෂාවන් සහ පෙරහන් නොමැතිව මෙය ක්‍රියාත්මක නොකරන්න! නැතිනම් ස්ක්‍රිප්ටයට ඔබේ වෙබ් අඩවිය හැක් කළ හැකිය!

පිළිතුර: ඔබ ඉලක්ක වෙබ් අඩවිය පාලනය කරන්නේ නම්, ඔබට ග්‍රාහක ස්ක්‍රිප්ට් සැකසිය හැක:

1) styleපරාමිතිය සමඟ iframe සබැඳිය සකසන්න , වැනි:

http://your_site.com/target.php?color=red

(අවසාන වාක්‍ය ඛණ්ඩය a{color:red} කේතනය කර ඇත්තේ ශ්‍රිතයෙනි urlencode.

2) ග්‍රාහක පිටුව target.phpමේ ආකාරයට සකසන්න :

<head>
..........
$col = FILTER_VAR(SANITIZE_STRING, $_GET['color']);
<style>.xyz{color: <?php echo (in_array( $col, ['red','yellow','green'])?  $col : "black") ;?> } </style>
..........

හොඳයි, මම මෙම පියවර අනුගමනය කර ඇත්තෙමි.

1. පැවැත්වීමට පන්තියක් සමඟ බෙදන්න iframe
2. එකතු iframeකිරීමට div.
3. CSS ගොනුවේ,

divClass { width: 500px; height: 500px; }
divClass iframe { width: 100%; height: 100%; }

මෙය IE 6 හි ක්‍රියාත්මක වේ. වෙනත් බ්‍රව්සර්වල වැඩ කළ යුතුදැයි පරීක්ෂා කරන්න!