ฉันต้องการเรียกใช้ฟังก์ชัน JavaScript หน้าต่างหลักจาก iframe
<script>
function abc()
{
alert("sss");
}
</script>
<iframe id="myFrame">
<a onclick="abc();" href="#">Call Me</a>
</iframe>
คำตอบ:
<a onclick="parent.abc();" href="#" >Call Me </a>ส่งคืนการอ้างอิงถึงพาเรนต์ของหน้าต่างปัจจุบันหรือเฟรมย่อย
หากหน้าต่างไม่มีพาเรนต์คุณสมบัติพาเรนต์จะเป็นการอ้างอิงถึงตัวเอง
เมื่อหน้าต่างมีการโหลดใน<iframe>, <object>หรือ<frame>พ่อแม่ของมันคือหน้าต่างที่มีองค์ประกอบฝังหน้าต่าง
alertจะถูกเรียก; alertฟังก์ชั่นของผู้ปกครองหรือฟังก์ชั่น iframe alertในกรณีที่parent.abc();เรียกว่าบน iframe?
window.postMessage()(หรือwindow.parent.postMessage()) อยู่ ตรวจสอบ@Andrii คำตอบ
เมื่อเร็ว ๆ นี้ฉันต้องค้นหาสาเหตุที่ไม่ทำงานเช่นกัน
จาวาสคริปต์ที่คุณต้องการโทรจาก child iframe จะต้องอยู่ในส่วนหัวของแม่ หากอยู่ในเนื้อความสคริปต์จะไม่สามารถใช้ได้ในขอบเขตส่วนกลาง
<head>
<script>
function abc() {
alert("sss");
}
</script>
</head>
<body>
<iframe id="myFrame">
<a onclick="parent.abc();" href="#">Click Me</a>
</iframe>
</body>หวังว่านี่จะช่วยให้ทุกคนที่สะดุดกับปัญหานี้อีกครั้ง
วิธีนี้ช่วยให้สามารถcross-originสื่อสารได้อย่างปลอดภัย
และถ้าคุณมีการเข้าถึงรหัสหน้าพ่อแม่ผู้ปกครองแล้ววิธีใดสามารถเรียกได้ว่าเป็นข้อมูลใด ๆ Iframeที่สามารถส่งโดยตรงจาก นี่คือตัวอย่างเล็ก ๆ :
เพจระดับบน:
if (window.addEventListener) {
window.addEventListener("message", onMessage, false);
}
else if (window.attachEvent) {
window.attachEvent("onmessage", onMessage, false);
}
function onMessage(event) {
// Check sender origin to be trusted
if (event.origin !== "http://example.com") return;
var data = event.data;
if (typeof(window[data.func]) == "function") {
window[data.func].call(null, data.message);
}
}
// Function to be called from iframe
function parentFunc(message) {
alert(message);
}รหัส iframe:
window.parent.postMessage({
'func': 'parentFunc',
'message': 'Message text from iframe.'
}, "*");
// Use target origin instead of *ปรับปรุง:
หมายเหตุด้านความปลอดภัย:
ระบุเป้าหมายเฉพาะเสมอไม่ใช่*ถ้าคุณทราบว่าควรจะวางเอกสารของหน้าต่างอื่นไว้ที่ใด ล้มเหลวในการให้เป้าหมายที่เฉพาะเจาะจงเปิดเผยข้อมูลที่คุณส่งไปยังเว็บไซต์ที่เป็นอันตรายที่สนใจ (ความเห็นโดยZalemCitizen )
อ้างอิง:
ฉันโพสต์สิ่งนี้เป็นคำตอบแยกต่างหากเนื่องจากไม่เกี่ยวข้องกับคำตอบที่ฉันมีอยู่
ปัญหานี้ถูกครอบตัดอีกครั้งเมื่อเร็ว ๆ นี้เพื่อเข้าถึงผู้ปกครองจาก iframe ที่อ้างอิงโดเมนย่อยและการแก้ไขที่มีอยู่ไม่ทำงาน
เวลานี้คำตอบคือการแก้ไข document.domain ของเพจระดับบนและ iframe ให้เหมือนกัน สิ่งนี้จะหลอกการตรวจสอบนโยบายต้นกำเนิดเดียวกันว่าพวกเขาอยู่ร่วมกันในโดเมนเดียวกัน (โดเมนย่อยถูกพิจารณาว่าเป็นโฮสต์ที่แตกต่างกันและล้มเหลวในการตรวจสอบนโยบายต้นกำเนิดเดียวกัน)
แทรกรายการต่อไปนี้<head>ของหน้าใน iframe เพื่อให้ตรงกับโดเมนหลัก (ปรับสำหรับประเภทเอกสารของคุณ)
<script>
document.domain = "mydomain.com";
</script>โปรดทราบว่าการทำเช่นนี้จะทำให้เกิดข้อผิดพลาดในการพัฒนา localhost ดังนั้นให้ตรวจสอบดังต่อไปนี้เพื่อหลีกเลี่ยงข้อผิดพลาด:
if (!window.location.href.match(/localhost/gi)) {
document.domain = "mydomain.com";
} example.comiframe abc.example.comดังนั้นทั้ง parent และ iframe ต้องเรียกdocument.domain = "example.com"
คุณสามารถใช้ได้
window.topดูต่อไปนี้
<head>
<script>
function abc() {
alert("sss");
}
</script>
</head>
<body>
<iframe id="myFrame">
<a onclick="window.top.abc();" href="#">Click Me</a>
</iframe>
</body>abc()จะใช้ได้ก็ต่อเมื่อfunction abc()มีการประกาศใน iframeซึ่งตรงข้ามกับในหน้าหลัก window.top.abc()แยกออกจาก iframe ลงในเอกสารหลัก
นอกจากนี้สำหรับผู้ที่ต้องการมันอีก วิธีแก้ปัญหาของ Ash Clarke ไม่ทำงานหากใช้โปรโตคอลที่แตกต่างกันดังนั้นให้แน่ใจว่าหากคุณใช้ SSL อยู่ iframe ของคุณก็กำลังใช้ SSL อยู่เช่นกันหรือจะทำให้ฟังก์ชั่นหยุดทำงาน วิธีแก้ปัญหาของเขาใช้งานได้กับโดเมนเองดังนั้นขอบคุณสำหรับสิ่งนั้น
โซลูชันที่ Ash Clarke มอบให้กับโดเมนย่อยนั้นใช้งานได้ดี แต่โปรดทราบว่าคุณต้องรวม document.domain = "mydomain.com"; ทั้งในส่วนหัวของหน้า iframe และส่วนหัวของหน้าหลักตามที่ระบุในลิงก์การตรวจสอบนโยบายต้นทางเดียวกัน
ส่วนขยายที่สำคัญสำหรับนโยบายกำเนิดเดียวกันนี้นำมาใช้สำหรับการเข้าถึง JavaScript DOM (แต่ไม่ใช่สำหรับรสชาติอื่น ๆ ส่วนใหญ่ของการตรวจสอบที่มาเดิม) คือเว็บไซต์สองแห่งที่แชร์โดเมนระดับบนสุดทั่วไปอาจเลือกที่จะสื่อสารแม้จะล้มเหลว "โฮสต์เดียวกัน" ตรวจสอบโดยการตั้งค่าคุณสมบัติ document.domain DOM ที่เกี่ยวข้องไปเป็นแฟรกเมนต์ขวามือเดียวกันของชื่อโฮสต์ปัจจุบัน ตัวอย่างเช่นถ้า http://en.example.com/และhttp://fr.example.com/ทั้งคู่ตั้ง document.domain เป็น "example.com" ทั้งคู่จะมาจากจุดนั้นบนจุดเริ่มต้นเดียวกันซึ่งถือว่าเป็นจุดกำเนิดเดียวกันสำหรับ วัตถุประสงค์ของการจัดการ DOM
document.domainคืออะไร?
localhostหรือที่อยู่ IP ของเครื่อง (โดยทั่วไป127.0.0.1) ขึ้นอยู่กับสิ่งที่อยู่ในแถบที่อยู่ URL
parent.abc ()จะทำงานในโดเมนเดียวกันเท่านั้นเนื่องจากวัตถุประสงค์ด้านความปลอดภัย ฉันลองวิธีแก้ปัญหานี้และฉันทำงานได้อย่างสมบูรณ์
<head>
<script>
function abc() {
alert("sss");
}
// window of the iframe
var innerWindow = document.getElementById('myFrame').contentWindow;
innerWindow.abc= abc;
</script>
</head>
<body>
<iframe id="myFrame">
<a onclick="abc();" href="#">Click Me</a>
</iframe>
</body>หวังว่านี่จะช่วยได้ :)
ด้วย Firefox และ Chrome คุณสามารถใช้:
<a href="whatever" target="_parent" onclick="myfunction()">หากฟังก์ชันของฉันมีทั้งใน iframe และในพาเรนต์จะเรียกว่าพาเรนต์หนึ่ง
ในขณะที่วิธีแก้ปัญหาบางอย่างอาจใช้งานได้ หลายคนกำหนดตัวแปรทั่วโลกและคุณอาจพบว่าตัวเองโทรไปยังตัวแปรหลักหรือฟังก์ชั่นหลายอย่างซึ่งนำไปสู่เนมสเปซที่รก
เพื่อหลีกเลี่ยงปัญหานี้ให้ใช้รูปแบบโมดูล ในหน้าต่างหลัก:
var myThing = {
var i = 0;
myFunction : function () {
// do something
}
};
var newThing = Object.create(myThing);จากนั้นใน iframe:
function myIframeFunction () {
parent.myThing.myFunction();
alert(parent.myThing.i);
};สิ่งนี้คล้ายกับรูปแบบที่อธิบายไว้ในบทมรดกของข้อความน้ำเชื้อของ Crockford "Javascript: The Good Parts" คุณสามารถเรียนรู้เพิ่มเติมได้ที่หน้า w3 สำหรับแนวทางปฏิบัติที่ดีที่สุดของ Javascript https://www.w3.org/wiki/JavaScript_best_practices#Avoid_globals